为啥在 Tailwind CSS JIT 模式下保存文件时样式不更新，我需要重新启动服务器？

Posted 2023-03-06

【中文标题】为啥在 Tailwind CSS JIT 模式下保存文件时样式不更新，我需要重新启动服务器？

【英文标题】：Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?为什么在 Tailwind CSS JIT 模式下保存文件时样式不更新，我需要重新启动服务器？

【发布时间】：2021-12-11 01:31:51

【问题描述】：

编辑：此问题现已弃用，因为 Tailwind 3.0.0 版无需使用 CRACO 即可使用 react。

在 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"
    

【参考方案1】：

在package.json 中，您应该在启动脚本上激活监视模式，例如

"scripts": 
   "start": "TAILWIND_MODE=watch craco start",
   ...

【参考方案2】：

更新

从 Tailwind v3.0+ 开始，JIT 模式现在是 built-in feature。

在 Tailwind CSS v3.0 中，新引擎已经稳定并取代了 经典引擎，因此每个 Tailwind 项目都可以从中受益 开箱即用的改进。

---

旧答案

这似乎是使用顺风 JIT 模式时的常见问题，在 troubleshooting guides 中有解释。

从 Tailwind CSS v2.2+ 开始，JIT 引擎依赖于 PostCSS 的 将您的内容文件注册为 CSS 的目录依赖消息 使用您的构建工具构建依赖项。这些是相当新的 除了 PostCSS（2021 年 5 月添加），并不是所有的构建工具都有 已更新以支持它们。

如果更改内容文件时 CSS 没有重新构建，请尝试 将TAILWIND_MODE=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",
    // ...
  ,
  // ...

另外，请注意

您应该只在实际运行时设置 TAILWIND_MODE=watch 一个开发服务器/监视进程，并且只有在你的构建工具还没有的情况下 支持 PostCSS 目录依赖消息。 这个标志是 不兼容工具的临时解决方法，最终将 在 Tailwind CSS 的未来版本中删除。

【参考方案3】：

检查您的package.json 以获取posctcss 版本。当我安装 Tailwind 时，它是第 7 版，我遇到了同样的问题。我刚刚将我的postcss 更新到了最新版本，它为我解决了这个问题。