tailwind css 样式不生效主因是 content 路径未覆盖源文件或动态类名未被 jit 扫描到；需正确配置 content 数组、使用 safelist 预声明动态类、避免变量拼接，并确保 postcss 正确加载 tailwind 插件。
Tailwind CSS 样式不生效，90% 的情况不是类名写错了，而是类名压根没进最终生成的 CSS 文件——浏览器根本没见过那个规则。
content 路径没覆盖到你的源文件
Tailwind 不运行时解析 class 字符串，只在构建时扫描 content 数组里列出的路径下的字面量类名。漏一个文件，里面写的 bg-blue-500 就彻底消失。
-
content: ["./src/*.js"]→ 漏掉.tsx、不递归子目录、不包含.html，React 组件全失效 -
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里没加，新页面的类就全丢
动态类名如 from-${color}-500 不生效
JIT 编译器只认源码里真实出现的完整字符串，from-${color}-500 是模板表达式，不是 from-blue-500 这个字面量，自然不生成 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 文件里啥都不会生成。
- 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 静态扫描捕获——这两点不验证，其他操作都是白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
