Tailwind JIT仅静态扫描源码中字面量类名，不执行JavaScript；动态拼接如text-${color}-600无法识别，safelist须用斜杠包裹正则匹配完整类名，预定义完整类名字符串是最稳妥解法。
Tailwind JIT 根本不执行 JavaScript，只扫描字面量
Tailwind 的构建过程发生在 npm run dev 或 npm run build 阶段，此时它只是用正则静态扫描源码文件里的完整字符串，比如 text-red-600、bg-blue-100。它不会运行 JS，也不会展开 text-${color}-600 这种模板字符串——在源码里，它就只是四个字符加两个变量占位符的字符串，不是真实类名。
常见错误现象：
- DOM 中
class="text-blue-600"显示正常，但文字没变色 - 开发者工具里查不到该类对应的 CSS 规则
- 开发服务器和生产构建都失效，不是环境差异问题
safelist 是唯一合规解法，但写错就等于没写
当值不可穷举（如用户输入 HEX、API 返回任意字符串）或必须用通配语法（如 line-clamp-${n}），safelist 是 Tailwind 提供的唯一白名单机制。但它对写法极其敏感：
- 匹配单个类：直接写字符串，如
'bg-blue-600' - 匹配模式：必须用正则，且要包裹斜杠，如
/^text-(red|blue|indigo)-600$/；写成'/text-red-600/'或{ pattern: 'text-red-600' }都无效 - 响应式前缀、变体（如
hover:bg-red-500、md:text-lg）必须显式包含在正则中，不能只写text-lg - 改完
tailwind.config.js后必须重启开发服务器，缓存不会自动更新
任意值语法（bg-[#333]）在动态绑定中极易出错
在 Vue/React 中写 :class="['text-[#333]', isActive && 'text-[#ff6b6b]']"，尤其在 uni-app 或 Taro 小程序里，会导致 WXML 编译器把方括号内容当纯字符串处理，引发转义错误（如 unexpected character \）。
更稳妥的做法：
- 避免在数组语法里直接写任意值，改用对象语法：
:class="{ 'text-[#ff6b6b]': isActive }" - 提取为预设颜色变量，在
tailwind.config.js的theme.extend.colors里定义brand: '#333'，再用text-brand -
shadow-[...]必须用英文逗号分隔多组值，空格会报错；rounded-[12px]这类写法根本不受支持——rounded-前缀不接受任意值
预定义完整类名比 safelist 更稳，也更适合类型安全
把组合逻辑提到数据层，让每个变量本身就是完整类名字符串，既绕过 JIT 扫描限制，又便于 TypeScript 类型约束。
例如：
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}。这种方式：
- 无需配置
safelist，也不依赖正则匹配精度 - 所有类名都在源码中“明写”，JIT 能 100% 扫描到
- 可在 TS 中定义
type ThemeKey = 'primary' | 'secondary' | 'danger'，避免拼写错误 - 比内联
style更符合 Tailwind 设计哲学，也利于复用和维护
真正容易被忽略的是：safelist 的正则必须匹配**完整类名**，且必须用斜杠包裹；而 content 配置再全也救不了动态拼接——它只决定“扫哪些文件”，不改变“怎么扫”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
