Tailwind CSS JIT模式保存文件样式不更新需重启服务器如何解决？

编辑提示：该问题已废弃，自Tailwind 3.0.0版本起无需使用CRACO即可与React适配

问题现象 #

React项目中使用Tailwind CSS JIT模式时，新增的类即便刷新页面也无对应样式，必须重启服务器样式才会生效。

项目配置 #

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

解决方法 #

方案一：保留现有版本修复 #

Tailwind 2.x的JIT模式默认未开启文件变更监听，只需在启动命令中添加对应环境变量即可：

• Windows系统修改package.json的scripts字段：

  "start": "set TAILWIND_MODE=watch && craco start"
  

• Mac/Linux系统修改为：

  "start": "TAILWIND_MODE=watch craco start"
  

• 如需跨系统兼容，可先安装cross-env依赖，再修改命令为：

  "start": "cross-env TAILWIND_MODE=watch craco start"
  

修改完成后重启开发服务器，新增样式类即可自动生效，无需反复重启服务。

方案二：升级到Tailwind 3.x（推荐） #

Tailwind 3.x默认启用JIT模式，无需额外配置兼容，也不需要依赖CRACO，操作更简单：

1. 卸载旧版本相关依赖：

   npm uninstall tailwindcss @tailwindcss/postcss7-compat postcss autoprefixer @craco/craco
   

2. 安装3.x版本依赖：

   npm install -D tailwindcss postcss autoprefixer
   

3. 执行初始化命令生成配置文件：

   npx tailwindcss init -p
   

4. 替换tailwind.config.js内容，原purge字段已废弃为content：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
       "./public/index.html"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

5. 还原package.json的启动命令，不再使用CRACO：

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   }
   

6. 删除项目根目录的craco.config.js文件，重启开发服务器即可。

内容的提问来源于stack exchange，提问作者K i