编辑:此问题现已弃用,因为3.0.0版的tailwind可与react一起使用,而无需使用CRACO。
在JIT模式下尝试使用Tailwind和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"
}
}
4条答案
按热度按时间0ve6wy6x1#
更新
自**Tailwind v3.0+**JIT模式现在为built-in feature。
在Tailwind CSS v3.0中,新引擎已经稳定并取代了经典引擎,因此每个Tailwind项目都可以从这些开箱即用的改进中受益。
旧答案
这似乎是使用顺风JIT模式时的常见问题,故障排除指南中对此进行了解释。
从Tailwind CSS v2.2+开始,JIT引擎依赖于PostCSS的目录依赖消息,将您的内容文件注册为构建工具的CSS构建依赖项。这些是PostCSS的一个相当新的添加(于2021年5月添加),并且尚未更新所有构建工具以支持它们。
如果在更改内容文件时CSS没有重建,请尝试将
TAILWIND_MODE=watch
设置为watch脚本的一部分,以告诉Tailwind使用传统的依赖项跟踪策略,该策略适用于许多构建工具。由于CRACO用于为React.js配置顺风CSS,因此将其添加到
package.json
文件中。另外,请注意
只有在实际运行开发服务器/监视进程时,并且只有在构建工具尚不支持PostCSS目录依赖消息时,才应设置TAILWIND_MODE=watch。此标志是不兼容工具的临时解决方案,最终将在Tailwind CSS的未来版本中删除。
xsuvu9jc2#
在
package.json
中,您应该在启动脚本上激活监视模式,如下所示:41ik7eoe3#
检查您的
package.json
的posctcss
版本。当我安装Tailwind时,它是版本7,我遇到了同样的问题。我只是将我的postcss
更新到最新版本,它为我解决了这个问题。hmmo2u0o4#
对我来说,当我安装“PostCSS语言支持”时,问题就解决了。给予一试吧!:)