class属性名拼错（如clas、calss、classname）会导致浏览器直接忽略该属性，dom中不显示class；类名拼错（如bg-blue500）、content路径未覆盖文件、动态类名未被静态识别均会使tailwind样式失效。
class 属性名拼错就全失效
浏览器遇到 clas、calss、className（在纯 HTML 中）这类写法，会直接忽略整个属性，不解析任何类名。现象是 DOM 里根本看不到 class 属性，哪怕你写了 bg-blue-500 text-center，也完全没反应。
验证方式很简单：右键检查元素 → 切到 Elements 面板 → 看该标签有没有 class="" 这个属性。没有？那就先改属性名。
注意：className 是 React JSX 的合法写法，不是错误；但在原生 HTML 或 Vue 模板中写 className 就无效。
类名本身拼错但不报错
Tailwind 类名是严格小写 + 连字符分隔的字符串，拼错一个字符，JIT 引擎就找不到对应规则，且完全静默——不警告、不报错、不生成 CSS。
-
bg-blue500❌（缺连字符）→ 正确是bg-blue-500 -
textBlue-600❌（驼峰）→ 正确是text-blue-600 -
bg-rose900❌（连字符缺失）→ 正确是bg-rose-900 -
bg-blue-1000❌（超出默认范围）→ Tailwind 默认只生成50–900 -
from-cyan-400 to-cyan-700✅ 是两个独立类；from-cyan-400-to-cyan-700❌ 是一个非法类
快速验证是否被扫描到：运行 npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify --watch，然后观察终端输出。如果类名拼错，它不会报错，但最终 CSS 文件里也不会出现对应规则。
content 路径没覆盖到当前文件
Tailwind 不是运行时解析 class 字符串，而是在构建阶段静态扫描源码中**字面量出现的类名**。路径没配对，类就根本不会进最终 CSS —— DOM 里能看到 class，但浏览器查不到规则。
常见错误：
-
content: ["./src/*.js"]→ 漏掉.tsx和嵌套目录，等于排除全部 React 组件 -
content: ["../src/App.tsx"]→ glob 不支持相对路径写法，Tailwind 直接跳过 -
content: ["./public/index.html"]→ Vite 默认不扫描public/下的 HTML，需手动加进配置
正确写法（React + TSX）：
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html"
]
微信小程序还要额外加 ./src/**/*.wxml；MDX 项目加 ./src/**/*.mdx；Lit 模板在 TS 字符串里，就得加 ./src/**/*.ts。
动态类名未被静态识别
像 class="{{status === 'error' ? 'text-red-500' : 'text-green-500'}}" 或 class="bg-${color}-500" 这种写法，构建时根本看不到完整类名，自然不生成 CSS 规则。
解决只有两条路：
- 高频组合预定义成对象：
const textClasses = { error: 'text-red-500', success: 'text-green-500' } - 用
safelist显式声明：safelist: ['text-red-500', 'text-green-500', /text-[a-z]+-500/]（注意：正则必须用斜杠包裹，写成字符串无效）
另外，JavaScript 动态设置 element.className 时，务必用空格分隔多个类，别写成 container-addTask 这种连体字——浏览器会当做一个类去查，而 Tailwind 没定义这个类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
