reactjs 为什么在Tailwind CSS JIT模式下保存文件时样式不更新,并且我需要重新启动服务器?

u2nhd7ah  于 2023-04-11  发布在  React
关注(0)|答案(4)|浏览(145)

编辑:此问题现已弃用,因为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"
    }
}
0ve6wy6x

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文件中。

{
  // ...
  scripts: {
    "dev": "TAILWIND_MODE=watch craco start",

    // Do not set TAILWIND_MODE for one-off builds
    "build": "craco build",
    // ...
  },
  // ...
}

另外,请注意
只有在实际运行开发服务器/监视进程时,并且只有在构建工具尚不支持PostCSS目录依赖消息时,才应设置TAILWIND_MODE=watch。此标志是不兼容工具的临时解决方案,最终将在Tailwind CSS的未来版本中删除。

xsuvu9jc

xsuvu9jc2#

package.json中,您应该在启动脚本上激活监视模式,如下所示:

"scripts": {
   "start": "TAILWIND_MODE=watch craco start",
   ...
}
41ik7eoe

41ik7eoe3#

检查您的package.jsonposctcss版本。当我安装Tailwind时,它是版本7,我遇到了同样的问题。我只是将我的postcss更新到最新版本,它为我解决了这个问题。

hmmo2u0o

hmmo2u0o4#

对我来说,当我安装“PostCSS语言支持”时,问题就解决了。给予一试吧!:)

相关问题