tailwind类名不生效主因是类名未进入css文件或未被浏览器解析：拼写错误（如clas）、content路径未覆盖源文件、动态插值类名未被jit识别、多类名间缺空格。
类名根本没进 CSS 文件
Tailwind 类名不生效，90% 的情况是它压根没生成对应规则——不是浏览器没加载，而是构建产物里就没有那个 bg-blue-500 或 text-red-600。打开 dist/assets/*.css（Vite）或 build/static/css/*.css（Create React App），用文本编辑器搜索目标类名，搜不到就确认是提取失败。
content 路径漏配或写错
Tailwind 只扫描 content 数组里明确列出的文件路径。漏掉一个扩展名，整片组件树的类就全丢。
-
content: ["./src/**/*"]→ 不匹配任何文件（glob 必须含扩展名） -
content: ["./src/**/*.{js,ts}"]→ 漏掉.tsx、.jsx，React+TS 项目直接失效 -
content: ["./public/index.html"]→ 忘加这一行？HTML 里写的class="mt-4"也会被 PurgeCSS 删光 - Vite 用户注意：
public/index.html默认不扫描，必须显式加入content
动态拼接类名被 JIT 编译器无视
className={`text-${color}-600`} 这种写法在源码里只是模板字符串 text-${color}-600，不是完整字面量 text-blue-600。JIT 不执行 JS，不推测变量值，只认写死的字符串。
- 现象：DOM 中
class属性显示正确，但无样式 → 本质是 CSS 规则缺失 - 验证方式：临时注释掉
content字段跑一次build，如果样式全回来了，说明是路径问题；如果依然失效，就是动态拼接问题 - 别指望
safelist兜底：正则写错（比如用字符串代替/^text-red-\d+$/）、漏响应式前缀（md:text-red-500需显式写/^(md|lg):text-red-500$/）都会白忙活
拼写错误让 class 属性直接被浏览器忽略
最隐蔽也最致命的失效原因：把 class 写成 clas、className（JSX 中合法，但最终渲染仍需转为 class）、classes 等非标准属性名。浏览器直接跳过整个属性，哪怕 DOM 里看着有 bg-blue-500，它也不会参与样式计算。
- 检查方式：Chrome/Firefox 开发者工具 → Elements 面板 → 找目标元素，看有没有
class属性；没有就立刻查拼写 - Vue 中
:class是语法糖，底层仍是设置class属性；原生 JS 动态创建时必须用element.className = ""，不能写element.classList = "" - 多个类名连成一串（如
container-addTask）会被当做一个非法类，必须用空格分隔
content 路径配置和 class 属性拼写，这两处出错时，开发者工具里往往看不出异常——DOM 结构正常、JS 逻辑跑通、甚至内联样式都生效，唯独 Tailwind 类名像消失了一样。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
