Tailwindcss V3.0.1 类不工作
Posted
技术标签:
【中文标题】Tailwindcss V3.0.1 类不工作【英文标题】：Tailwindcss V3.0.1 classes is not working 【发布时间】：2022-01-15 16:08:31 【问题描述】：我尝试使用本指南安装 tailwindcss 3.0.1，但是当我将 tailwindcss 类添加到我的反应代码时，它不起作用。 我按照这个指南整合了顺风反应：https://tailwindcss.com/docs/guides/create-react-app
我使用 npx creat-react-app myApp 而不是 npx create-react-app@next --scripts-version=@next --template=cra-template@next my-project 创建了一个 react 应用
请大家帮帮我。
【问题讨论】：
【参考方案1】：设置的主要问题是，tailwind 版本 3 依赖于最新的 react-scripts 版本，该版本具有对 postCSS 的原生支持，可以在不使用 craco 等额外工具的情况下编译 tailwind。
您只需将 package.json 中的 react-scripts 版本更改为“5.0.0-next.58”，然后使用 npm install 或 yarn install 重新安装您的包。您可以访问此 repo 以更好地了解https://github.com/adamwathan/tailwind-cra-next
【讨论】：
【参考方案2】：我尝试了很多解决方案，看来要成功使用React和Tailwindcss V3.0.1，安装中的第一行至关重要：
npx create-react-app@next --scripts-version=@next --template=cra-template@next my-project
但我找到了简单的解决方案安装类似docs 中的所有内容并将此行添加到Public 文件夹中的index.html。它可以工作，但是出于开发目的only！ p>
<script src="https://cdn.tailwindcss.com"></script>
像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
【讨论】：
【参考方案3】：我遇到了同样的问题并找到了这个解决方案：https://phoenixnap.com/kb/update-node-js-version
我更新了我的 node js，因为当前版本与 tailwindcss v3.0 不兼容。 （我将它从14.16.0 更新为17.3.0）
首先检查您的节点版本：
node -v
如果低于 v16，请考虑更新。
运行此命令将节点 js 更新到最新版本：
npm cache clean -f
npm install -g n
sudo n stable
在此之后删除您的 node_modules 文件夹并通过运行 yarn 或 npm i 再次安装它
【讨论】：
以上是关于Tailwindcss V3.0.1 类不工作的主要内容，如果未能解决你的问题，请参考以下文章
使用“nuxt build”时动态创建的类不可用 - tailwindcss nuxtjs
如何使 tailwindcss 与当前的 Angular 6 一起工作？
Tailwindcss 3 不在 Windows 10 上初始化