tailwind类名失效的四大原因：未生成（devtools中灰色/删除线或缺失）、content路径漏配、class属性拼写错误（如clas）、动态类名未被jit识别（需预定义而非模板字符串）。
DevTools里看类名是否被加载
打开浏览器开发者工具，选中目标元素，在Styles面板里直接观察：如果某个Tailwind类名显示为灰色、带删除线，或压根没出现在CSS规则列表中，说明它没进最终生成的CSS文件——不是样式被覆盖，是根本没生成。
快速验证法：
• 在Elements面板手动删掉该类（比如text-red-500），看对应样式是否立刻消失；
• 在Console里运行getComputedStyle(document.querySelector('.your-class')).color，返回空字符串或意外值（如''或'rgb(0, 0, 0)'而非预期色值）就确认失效；
• 右键类名 → “Show all related rules”，检查是否有更高优先级规则（比如!important自定义样式）在干扰。
用tailwindcss CLI 扫描未使用的类
Tailwind本身不提供“无效类名”检测，但可通过构建流程反向定位：未被content路径覆盖的类，就是实际无效的。运行以下命令可暴露问题：
npx tailwindcss -i input.css -o output.css --content "./src/**/*.{js,jsx,ts,tsx}" --watch
注意：
• 如果终端报错Cannot find module 'tailwindcss'，先npm install -D tailwindcss；
• 若输出CSS体积异常小（比如output.css只有几KB），大概率content漏配了新目录（如Next.js的app/**）；
• 构建后检查output.css里是否存在目标类名（Ctrl+F搜bg-blue-600），不存在即为无效。
排查class属性拼写错误
这是最隐蔽也最常被忽略的一环：HTML里写成clas、className或classes，浏览器直接忽略整个class属性，所有Tailwind类名全部失效，但内联style仍正常——导致你误以为是“部分类失效”。
检查要点：
• 查看Elements面板中该元素的属性：必须是class="..."，不能是clas="..."或className="..."；
• React中JSX必须用className，但最终渲染到DOM时仍是class属性，所以问题只出在HTML模板或原生JS操作DOM时；
• Tailwind类名严格小写+连字符：bg-Rose-500、textsm、md:text-lg全都不生效。
动态类名是否被JIT引擎看见
只要类名是通过JS表达式拼出来的（如className={`text-${color}-600`}），它在源码里就是模板字符串，JIT编译器根本不会展开变量去猜值——所以text-blue-600不会被生成，即使DOM里显示正确。
判断依据：
• 打开DevTools → Elements → 找到该元素 → 点开class属性值 → 复制完整字符串（如text-blue-600）→ 在output.css里Ctrl+F搜索，找不到即为JIT未识别；
• 不要依赖safelist兜底所有动态场景，它只适合取值有限且可枚举的情况（如line-clamp-1到line-clamp-6）；
• 真正可靠的解法是预定义：把text-blue-600这种完整字符串作为变量值存下来，再直接引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
