Tailwind JIT 编译器仅扫描源码中已写死的完整字符串字面量，模板字符串如 text-${color}-600 因含插值无法被识别，导致对应 CSS 规则不生成，class 存在但无样式。
因为 Tailwind 的 JIT 编译器根本不会执行 JavaScript，它只在构建时扫描源码里**已写死的完整字符串字面量**——text-${color}-600 这种模板字符串，在编译器眼里就是一串带 ${} 的普通文本，不是 text-blue-600，所以对应 CSS 规则压根不会生成。
DOM 里 class 属性看着正常，但没样式
这是最典型的误判信号：你在浏览器开发者工具里能看到 class="text-blue-600"，但文字就是不蓝。这不是优先级问题，也不是 !important 能解决的——那个类名根本不在最终生成的 dist/*.css 文件里。
- 用文本编辑器直接打开构建产物（如
dist/assets/index.css），搜索text-blue-600，如果找不到，就确认是 JIT 扫描失败 - 开发服务器（
npm run dev）和生产构建（npm run build）都会失效，不是环境差异 - 改 class 顺序、加 wrapper div、甚至把整个组件包进
tw`...`都无效——规则不存在，覆盖无从谈起
哪些动态写法一定会被 JIT 忽略
只要类名被拆开、插值、或依赖运行时逻辑，JIT 就无法提取。常见失效模式包括：
-
className={`bg-[${hex}]`}——hex是变量，JIT 不解析表达式 -
className={`text-${size}-font-bold`}—— 中间${size}是变量，扫描器只看到text-和-font-bold两段 -
:class="`p-${padding}`"（Vue）或className={cls + ' w-4'}—— 字符串拼接破坏了完整字面量形式 -
class="md:text-${size}"—— 响应式前缀 + 插值，双重失效
预定义完整类名是最稳的解法
把组合逻辑提到数据层，让每个变量值本身就是可被扫描到的完整类名字符串：
const theme = {
primary: 'text-blue-600 bg-white',
secondary: 'text-gray-700 bg-gray-100',
danger: 'text-red-600 border border-red-300'
};
✅ 使用方式：className={theme.primary} —— 字符串静态、完整、无插值
- 优势：无运行时开销、不膨胀 CSS、TypeScript 可类型约束、IDE 支持跳转
- ⚠️ 注意：如果混入自定义类（如
my-custom-class），需额外加到safelist，否则会被 PurgeCSS 清掉 - 不推荐用
content: ["./src/**/*"]“补救”——它只决定扫哪些文件，不改变“怎么扫”，对插值无效
safelist 是唯一合规的兜底入口
当值不可穷举（如用户输入的 HEX、API 返回的任意字符串）或必须用自定义语法（如 line-clamp-${n}、bg-[url()]），safelist 是唯一能走 Tailwind 语法的路径：
- 写字符串：
'bg-blue-600'—— 适合高频固定值 - 写正则：
{ pattern: /^line-clamp-[1-6]$/ }—— 注意必须匹配完整类名，不能只写/line-clamp-/ - 响应式前缀要显式包含：
/(md|lg):text-red-500/，否则md:text-red-500不会被识别 - ⚠️ 改完
safelist必须重启开发服务器，缓存不自动更新
真正容易被忽略的是：safelist 不是“开了就万事大吉”的开关，而是需要你对匹配范围有精确判断——正则太宽会引入大量无用 CSS，太窄又漏匹配；而预定义方案看似麻烦，实则是把不确定性提前收口到类型系统里，长期维护成本更低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
