Edit:此问题现已弃用，因为3.0.0版的tailwind可以与react一起使用，而无需使用CRACO.
当我尝试在JIT模式下使用React的顺风时，我添加的类没有样式，即使在刷新页面之后。我必须重新启动服务器才能使样式生效。
tailwind.config.js:
module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
...
}
craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")]
}
}
}
package.json:
{
"name": "random-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}
}
更新
顺风v3.0+JIT模式现在是一个内置功能。
在顺风CSS v3.0中，新引擎已经稳定并取代了经典引擎，所以每个顺风项目都可以从中受益开箱即用的改进。
老回答
在使用顺风JIT模式时，这似乎是一个常见的问题，在故障排除指南中有解释。
从顺风CSS v2.2+开始，JIT引擎依赖于PostCSS的将您的内容文件注册为CSS使用构建工具构建依赖项。这些是相当新的PostCSS(于2021年5月添加)，并不是所有的构建工具都有已更新以支持它们。
如果您的CSS在更改内容文件时没有重建，请尝试设置
TAILWIND_MODE=watch作为监视脚本的一部分来告诉转而使用遗留依赖项跟踪策略
因为CRACO是用来为React.js配置顺风CSS的，所以把它添加到你的package.json文件中。
{
// ...
scripts: {
"dev": "TAILWIND_MODE=watch craco start",
// Do not set TAILWIND_MODE for one-off builds
"build": "craco build",
// ...
},
// ...
}
另外，请注意
您应该只在实际运行时设置TAILWIND_MODE=watch一个开发服务器/监视进程，只有当你的构建工具还没有支持PostCSS目录依赖消息。这个标志是一个不兼容工具的临时解决方案，最终将成为
在package.json中，您应该在启动脚本上激活监视模式，如
"scripts": {
"start": "TAILWIND_MODE=watch craco start",
...
}
检查package.json是否为posctcss版本。当我安装Tailwind时，它是版本7，我有同样的问题。我刚把我的postcss更新到最新版本，它为我解决了这个问题。
对于我来说，当我安装了"PostCSS语言支持"后问题就解决了。试试吧!:)