Tailwind 默认不会扫描动态拼接的类名，因为它的 JIT 引擎只会静态分析源码中明确写出的完整字符串字面量，不会执行 JavaScript、不会展开模板字符串（如text-${color}-600），也不会推断变量的实际取值，因此在构建阶段无法识别并生成对应的 CSS 规则。
为什么Tailwind不扫描动态拼接的类名
Tailwind 的 JIT 引擎本质上只识别“静态可见”的内容：它不会执行 JS，不会展开模板字符串，也不会去推测变量最后会变成什么值。比如className={`text-${color}-600`}，或者:class="`bg-${theme}-500`"这类写法，在源码里本质上仍然只是包含${}的字符串字面量。对于 JIT 扫描器来说，它无法拿到text-red-600、bg-dark-500这类完整的 Tailwind 类名，因为这些类名在构建时并没有真实、完整地出现在代码中。
这并不是 Tailwind 配置错误，也不是扫描路径写错，而是其工作机制决定的：JIT 是通过文本匹配生成 CSS，而不是依赖运行时 DOM 或 JavaScript 执行结果来推导样式。
必须配置content字段并确保覆盖所有模板位置
content配置是让 safelist 生效的前提条件。如果 content 没有扫描到你实际编写类名的文件位置，那么即使 safelist 写得再完整也不会生效——因为 JIT 连应该扫描哪些文件都无法确定。
- Vue 项目应包含
./src/**/*.{vue,js,ts,jsx,tsx}，尤其不要遗漏.vue后缀 - Django 项目需要加入
./templates/**/*.html和./**/*.py（很多模板逻辑会出现在 Python 文件中） - Vite 或 Next.js 项目务必补全
.tsx、.mdx等实际使用到的扩展名 - 路径建议使用双引号包裹，通配符也不能省略扩展名，例如
"./src/**/*"通常会导致扫描失效
safelist怎么写才真正生效
safelist 并不是“写上就能用”，它必须精确匹配运行时最终可能出现的完整类名，同时正则表达式的边界也必须写准确。
- 固定类名可以直接写字符串：
'text-red-600'、'bg-opacity-75' - 涉及变量场景时可用正则，但要保证完整匹配：
/^text-(red|blue|emerald)-600$/✔️，/text-.*/❌（范围过宽，容易生成大量冗余 CSS） - 修饰符类必须包含冒号：
/^hover:scale-d+$/、/^dark:bg-(gray|slate)-800$/ - 像
bg-[${hex}]这类颜色插值无法通过 safelist 覆盖，只能改成预定义颜色值或使用 CSS 变量方案 - safelist 必须是数组，不能写成字符串；例如
safelist: "text-red-600"会直接静默失效
开发时修改safelist后必须重启服务器
JIT 会在启动时读取tailwind.config.js并缓存 safelist 规则，运行过程中修改配置通常不会自动热更新。
- 修改完
safelist后，先关闭npm run dev，再重新启动开发服务器 - 生产环境构建前也要确认
npm run build读取的是最新配置，否则最终打包结果仍然会缺少对应样式 - 验证方法：打开浏览器开发者工具，搜索
.text-red-600，确认它是否已经出现在生成后的 CSS 文件中
最容易被忽略的通常是 content 路径遗漏，以及 safelist 正则边界写错——哪怕只是少写一个$，或漏掉dark:中的冒号，对应的 Tailwind 类名依然不会生成，页面样式也就会异常缺失。
