Tailwind CSS 样式没有生效，最常见的原因通常只有两个：要么是 content 路径配置没有完整覆盖源码文件，要么是动态类名没有被 JIT 正确扫描到。排查这类问题时，关键应聚焦在几项核心设置上：先确保 content 数组配置准确无误；遇到动态类名场景时，用 safelist 提前声明；尽量避免通过变量拼接类名；同时还要确认 PostCSS 已正确加载 Tailwind 插件。
Tailwind CSS 样式不生效，90% 的情况并不是类名写错，而是这些类名根本没有进入最终生成的 CSS 文件——也就是说，浏览器压根没有拿到对应的样式规则。
content 路径没覆盖到你的源文件
Tailwind 并不会在运行时解析 class 字符串，它只会在构建阶段扫描 content 数组中配置的文件路径，并从这些文件里提取写死的字面量类名。只要漏配了某个文件类型或目录，即使里面明确写着 bg-blue-500，最终也可能被直接遗漏，导致 Tailwind CSS 样式无法生效。
content: ["./src/*.js"]→ 会漏掉.tsx、不会递归子目录、也不包含.html，React 组件中的 Tailwind 类名可能全部失效content: ["./src/**/*.{js,jsx,ts,tsx}"]✅ 更标准的写法（React + TSX 场景）- Vite 用户必须显式加入
"./public/index.html"，否则 HTML 文件中的类名不会被扫描到 - 使用了 MDX、Astro、Lit？记得补上对应扩展名，例如
"./src/**/*.mdx"或"./src/**/*.astro" - Next.js App Router 新增了
app/**/*目录？如果content没加进去，新页面里的 Tailwind 样式就会全部丢失
动态类名如 from-${color}-500 不生效
JIT 编译器只识别源码中真实存在的完整字符串，from-${color}-500 属于模板表达式，并不是 from-blue-500 这样的字面量，因此 Tailwind 不会自动为它生成对应的 CSS 规则。
- 高频组合建议提前预定义：
const gradients = { primary: 'from-blue-500', danger: 'from-red-500' } - 必须使用
safelist显式声明：safelist: ['from-blue-500', 'from-red-500', /from-[a-z]+-500/]（注意正则必须使用斜杠包裹，'/from-[a-z]+-500/'只是字符串，不能生效） - 避免使用
bg-[${hex}]这类任意值动态写法，改成style={{ backgroundColor: hex }}会更稳定可靠 - 变量拼接如
const cls = 'p-4 m-2'，JIT 通常无法准确识别，只能依赖safelist或重构为明确的字面量类名
class 属性拼写错误或空格缺失
这是非常隐蔽但又高频的失效原因：属性名拼写错误，或者多个类名被错误连在一起，浏览器都会直接忽略整条 class 值，最终表现为样式不生效。
- 写成
clas="bg-blue-500"或className="bg-blue-500"（原生 JS）→ 浏览器无法识别，DOM 中实际上不会生成class属性 - React 中
className是合法的 JSX 属性，但最终仍会被编译成class；Vue 模板只识别class，而:class则是响应式绑定语法 container-addTask是一个完整类名，并不是container和addTask两个类 → 必须用空格分隔："container addTask"- JS 动态赋值时：
element.className = "w-auto md:w-[82%] mx-10"，不要使用连字符或逗号来分隔多个类名
PostCSS 插件未加载或配置冲突
Tailwind 本质上是一个 PostCSS 插件，如果构建流程没有正确接入它，@tailwind 指令就会被当成普通内容处理，最终 CSS 文件里不会生成任何 Tailwind 样式。
- Vite 项目请确认已安装
@tailwindcss/vite（v4+ 推荐），并且postcss.config.cjs正确导出插件配置：plugins: { tailwindcss: {}, autoprefixer: {} } - 根目录如果存在
postcss.config.js？它会完全接管 PostCSS 实例，可能导致框架内置的 Tailwind 插件被跳过 - Umi v4+ 项目应使用
@umijs/plugin-tailwindcss，不能只直接安装tailwindcss包 - 修改完配置后一定要重启开发服务器——否则 Node.js 模块缓存、PostCSS 扫描结果不会立即刷新，热更新也未必会触发重新构建
最容易被忽视的关键点，就是 content 路径是否真正匹配磁盘上的实际文件结构，以及动态类名是否被 JIT 的静态扫描成功捕获——如果这两项没有先确认，其他排查和修复操作大多都是无效劳动。
