Tailwind 类名不生效主因是类名未进入CSS或未被解析：拼写错误（如clas）、content路径未覆盖源文件、动态插值类名未被JIT识别、多类名间缺空格。需按顺序排查拼写、路径、safelist。
Tailwind 类名不生效，90% 以上的情况不是框架坏了，而是类名根本没进最终 CSS 文件，或者压根没被浏览器当 class 解析。
class 属性拼写错误：最隐蔽的失效原因
把 class 写成 clas、className 或 classes，浏览器直接忽略整个属性值——哪怕 DOM 里看着有 bg-blue-500，它也不会参与样式计算。
- 在 Chrome/Firefox 开发者工具中右键检查元素，看 Elements 面板里该标签是否真有
class属性；如果没有，立刻检查拼写 -
className是 React JSX 的合法属性名，但最终渲染仍需转为class；若用原生 JS 动态创建元素，必须用element.className = "..."，不能写element.classList = "..." - Vue 模板里也只认
class，:class是响应式绑定语法，底层仍是设置class属性
content 路径未覆盖源文件：类名被静态扫描直接跳过
Tailwind 不运行时解析，只在构建时扫描你配置的 content 路径下的字面量类名。路径漏掉一个 .tsx 后缀，整套组件的类就全丢。
- 错误写法：
content: ["./src/*.js"]→ 不匹配App.tsx、不递归子目录、不包含.jsx - 正确写法（React + TSX）：
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"] - 用 MDX/Astro/Lit？补上对应扩展名，比如
"./src/**/*.mdx"或"./src/**/*.ts"（Lit 模板常写在 TS 字符串里） - Vite 用户注意：
public/index.html默认不扫描，必须显式加入content数组
动态类名如 from-${color}-500 失效：JIT 编译器看不到完整字符串
模板插值生成的类名，在源码里只是 from-${color}-500 这个表达式，不是 from-blue-500 这个字面量——编译器无法预测 color 的值，自然不生成规则。
- 预定义完整类名最稳：
const gradients = { primary: "from-blue-500 to-blue-700" }，然后className={gradients.primary} - 必须用变量控制？走
safelist：safelist: ["from-blue-500", "from-red-500", /from-[a-z]+-500/]—— 注意正则必须用斜杠包裹，写成字符串无效 - 避免
bg-[${hex}]这类任意值：改用内联style={{ backgroundColor: hex }}，更直白且 100% 生效 - 不要在
safelist里塞通配正则（如/.*-500/），CSS 体积会爆炸
多个类名连成一串：空格缺失导致浏览器识别为单个非法类
写成 container-addTask w-auto，浏览器认为第一个类是 container-addTask，而不是 container 和 addTask 两个独立类——后者 Tailwind 有定义，前者没有。
- JS 动态拼接时，用空格连接：
element.className = "w-auto md:w-[82%] mx-10"，别用连字符或下划线 - React 中用数组展开更安全：
className={["w-auto", "md:w-[82%]", "mx-10"].join(" ")} - Vue 模板里同样靠空格分隔：
class="w-auto md:w-[82%] mx-10"，多写一个空格无害，少一个就失效
真正难排查的，往往是 content 路径和动态类名的组合问题：路径对了但用了插值，或路径漏了但你误以为是插值问题。先确认 class 拼写和空格，再查 content，最后动 safelist——顺序错了，花半天也白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
