Tailwind utility类不生效最常见的原因是PurgeCSS误删未直接匹配的类名或CSS引入顺序导致覆盖；需检查content配置路径是否完整、动态class是否显式声明、@tailwind三指令顺序是否正确、JIT模式是否正常工作及PostCSS插件是否加载成功。
Tailwind 的 utility 类不生效，最常见的原因是 PurgeCSS（或新版的 content 配置）误删了未直接匹配的类名，或是 CSS 引入顺序导致样式被覆盖。
检查 content 配置是否覆盖所有模板路径
Tailwind 会根据 tailwind.config.js 中的 content（旧版叫 purge）字段扫描文件，只保留实际用到的 class。如果路径没写全，比如漏掉 .vue、.tsx 或动态拼接的 class，对应样式就会被移除。
- 确认
content数组包含所有含 Tailwind class 的源文件，例如：content: ["./src/**/*.{js,ts,jsx,tsx,vue}"] - 避免使用过于宽泛的排除（如
!./node_modules/**），Tailwind 不需要你手动排除 node_modules - 若用了动态 class（如
class="text-${color}-500"），需在content中显式列出可能值，或改用@layer utilities定义安全类
确认 CSS 文件引入顺序是否正确
Tailwind 的 @tailwind base、@tailwind components、@tailwind utilities 必须按顺序写在主 CSS 入口里，且不能被其他 CSS（尤其是重置库或第三方样式）覆盖。
- 确保你的
main.css或index.css中三者顺序完整，没有注释掉某一层 - 检查是否在
@tailwind utilities后又引入了全局 CSS，它可能用!important或高优先级选择器覆盖了 utility 类 - 在浏览器开发者工具中查看元素 computed styles，看对应 utility 类是否出现在
style标签或tailwind.css中 —— 如果完全没出现，是 Purge 问题；如果出现了但被划掉，是覆盖问题
验证是否启用了 JIT 模式及开发环境行为
Tailwind v3 默认启用 JIT（Just-in-Time）引擎，它按需生成 CSS，但仅在开发时监听文件变化。构建生产包时若未正确触发，也可能导致缺失。
立即学习“前端免费学习笔记（深入）”；
- 开发时保存任意一个含 Tailwind class 的文件，观察控制台是否有 JIT 重新编译日志
- 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch手动测试编译，确认 class 是否出现在输出 CSS 中 - 禁用 JIT（
mode: "aot"）可临时验证是否为 JIT 监听异常，但不推荐长期使用
检查 PostCSS 和构建工具插件是否正常加载
Tailwind 依赖 PostCSS 插件，如果插件未注册、版本冲突或配置被覆盖，@tailwind 指令就不会解析。
- 确认
postcss.config.js中有tailwindcss和autoprefixer，且顺序无误 - Vite 用户检查
vite.config.js是否遗漏tailwindcss插件（通常不需要，但自定义 PostCSS 配置时易出错） - Webpack 用户确认
postcss-loader已启用，并传入正确的postcss.config.js
