Vite+React项目中TailwindCSS类失效问题求助

问题场景 #

使用Vite作为构建工具、TailwindCSS开发样式时，出现Tailwind转译器停止生成新工具类，但进程并未终止的情况。项目规模较小时可忽略，随着功能扩展需要更多工具类，该问题已严重影响开发。已尝试重启服务、刷新页面，样式导入路径无误，但问题未解决。

提供的tailwind.config.js配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "src/*.{js,jsx,ts,tsx,html}",
    "index.html",
  ],
  theme: {
    extend: {
      colors: {
        "main": "#00be73",
        "main-secondary": "#3BA166",
        "main-tertiary": "rgb(134, 239, 172)",
        "success": "#00be73",
        "success-secondary": "#3ba166",
        "danger": "#d70000",
        "danger-secondary": "#9C1B1B",
        "sub": "#808080",
        "sub-active": "#666666",
        "sub-secondary": "#E6E6E6",
        "sub-secondary-active": "#CCCCCC",
        "sub-tertiary": "#FFFFFF",
        "warning": "#FFE100",
        "warning-secondary": "#BFA900",
        "info": "#66baff",
        "info-secondary": "#0070cc",
      }
    },
  },
  plugins: [],
}

排查与解决方案 #

1. 修正content路径匹配规则 #

当前配置仅匹配src根目录下的文件，若项目中组件/页面放在src的子目录中，Tailwind无法扫描到这些文件，自然不会生成对应工具类。修改content配置为：

content: [
  "src/**/*.{js,jsx,ts,tsx,html}", // 用**匹配所有子目录
  "index.html",
],

2. 清除构建缓存 #

Vite或Tailwind的缓存可能导致转译异常，执行以下操作：

• 删除项目根目录下的node_modules/.cache文件夹
• 重启Vite时添加--force参数强制清除缓存：

  vite --force
  

3. 检查依赖版本兼容性 #

版本不匹配可能导致转译逻辑异常，更新相关依赖到稳定版本：

npm update tailwindcss postcss autoprefixer vite

4. 验证PostCSS配置 #

确保postcss.config.js配置正确（Vite环境下默认支持该配置），内容如下：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

若之前使用module.exports，建议改为ES模块格式（export default）以适配Vite的ES模块优先特性。

5. 排查异常文件 #

若上述步骤无效，可能是某个文件内容导致Tailwind扫描卡住：

• 暂时注释content中的部分路径，逐步排查是哪个文件引发的问题
• 检查是否存在超大文件、包含特殊字符的文件，或语法错误的模板文件

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