tailwind css的content配置无法扫描动态类名，因其仅匹配源码中字面量存在的完整类名（如text-red-500），不执行js插值或解析模板字符串，故text-${color}-500等运行时拼接结果在构建时不可见。
content 配置本身无法扫描动态 CSS 类——它只匹配源码中字面量出现的完整类名，比如 text-red-500；而 text-${color}-500、bg-[${theme.bg}] 这类运行时拼接的结果，JIT 编译器根本看不到。
为什么 content 里加路径也扫不到动态类名
content 的作用是告诉 Tailwind “去哪些文件里找静态类名”，不是让它执行 JS 或解析模板字符串。哪怕你把 content 写成 ["./src/**/*.{js,jsx,ts,tsx}"]，它看到的也只是 text-${color}-500 这个字符串，而非最终生成的 text-blue-500 或 text-green-500。
- JSX 中
className={`text-${size}-sm`}→ 扫描器只看到模板字符串，不展开变量 - Vue 中
→ 同样不解析表达式结果
- React + TypeScript 接口约束（如
variant: 'primary' | 'secondary'）→ 类型信息对 JIT 无用，它不读类型定义
动态类名必须靠 safelist 显式声明
这是唯一可靠、可控的方式。safelist 不依赖扫描，而是直接告诉 Tailwind：“这些类，不管有没有在源码里写死，都要生成 CSS”。关键是要让正则或字符串精确匹配运行时实际出现的类名。
- 固定值用字符串：
'bg-red-500'、'hover:scale-105' - 有限枚举用正则：
/^text-(sm|md|lg)-\d+$/匹配text-sm-600、text-lg-900等 - 注意边界：
/^line-clamp-[1-6]$/正确，/line-clamp-/错误（太宽泛，可能匹配到无用类） - 含伪类或变体要完整写：
/^group-hover:scale-\d+$/，不能漏掉:
content 配置仍需精准，否则 safelist 也救不回来
safelist 只保“已知模式”，但如果你的静态类名（比如组件里写的 flex justify-center）都没被扫到，页面会大面积失样式——这时再全量加 safelist 也没用，因为基础布局类都没生成。
- 路径必须以
./开头，且后缀明确：["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"] - Next.js 的
app/目录下layout.tsx、page.tsx必须显式包含，否则根级类丢失 - 漏掉某个组件目录（如
./src/features/**/*），对应文件里的所有静态类都会被 Purge 掉 - 改完
content或safelist后，必须重启开发服务器——JIT 缓存不会自动更新
真正容易被忽略的点是：safelist 和 content 是协作关系，不是替代关系。content 没扫到静态类，safelist 再多也撑不起整个 UI；safelist 没覆盖动态组合，content 再准也会丢样式。两者缺一不可，且都得贴近真实运行时输出的类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
