Tailwind CSS类不更新、自动重建失效及构建耗时疑问求助

先检查核心配置 #

• 打开tailwind.config.js，确认content字段包含所有用到Tailwind类的文件路径，比如：

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

  路径漏写或写错会导致Tailwind监测不到文件变化，自然不会自动更新类。

替换构建命令 #

• 别用npm run build做开发构建，这是生产环境的一次性打包命令。在package.json里配置开发监听命令：

  "scripts": {
    "dev": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
  

  之后运行npm run dev，它会持续监测文件改动，自动触发重建，不用手动重启服务器。

关于构建耗时 #

• 212ms的构建耗时是正常的，开发环境下Tailwind做增量构建，首次构建可能稍慢，后续更新会更快，这个时间在合理区间内。

额外排查项 #

• 清缓存：删掉项目根目录的node_modules/.cache文件夹，或者重启IDE，有时候IDE缓存会导致文件变化不被识别。
• 升级Tailwind：如果是旧版本，可能存在热更新bug，执行npm install tailwindcss@latest升级到最新稳定版。

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