tailwind jit编译器不执行javascript，仅静态扫描源码中写死的完整字符串字面量，因此text-${color}-600等模板字符串在构建时无法被识别和生成对应css规则，必须通过safelist预声明或使用静态完整类名。
因为 Tailwind 的 JIT 编译器不执行 JavaScript，只扫描源码中写死的完整字符串字面量——text-${color}-600 这种模板字符串在构建时根本不会被识别为有效类名，自然不会生成对应 CSS 规则。
Tailwind 构建阶段根本不“看懂”JS 表达式
Tailwind 的类名提取发生在 build time，不是 runtime。你写的 className={`text-${color}-600`} 在源码里就是一段未展开的模板字符串，编译器看到的是 text-${color}-600，而不是 text-blue-600。它不会运行 JS、不会推测变量值、也不会做字符串插值。
- DOM 中
class属性显示正常（如text-red-600），但无样式生效 → 本质是该类名从未被写入最终 CSS 文件 - 开发服务器（
npm run dev）和生产构建（npm run build）全都会失效，不是环境差异问题 - 用文本编辑器搜索生成的
dist/*.css文件，确认text-red-600是否真实存在 —— 如果不存在，说明 JIT 没扫描到
safelist 不是兜底开关，而是精准声明
当值不可穷举（如用户输入的 HEX、API 返回的任意字符串）或必须用自定义语法（如 line-clamp-${n}），safelist 是唯一合规入口，但它需要你明确告诉 Tailwind：“这些模式我确定会用到”。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 写字符串：
'bg-blue-600'—— 适合高频固定值 - 写正则：
{ pattern: /^line-clamp-[1-6]$/ }—— 注意必须匹配完整类名，不能写/line-clamp-/ - 响应式前缀要显式包含：
{ pattern: /^(md|lg):text-red-500$/ }，否则md:text-red-500会被忽略 - 正则必须用斜杠包裹，写成
'/from-[a-z]+-500/'会被当普通字符串处理，完全无效 - 改完
safelist必须重启开发服务器，JIT 缓存不会自动更新
预定义完整类名是最稳的解法
把组合逻辑提前到数据层，让每个变量值本身就是可被扫描到的完整类名字符串。这样既符合 Tailwind 的设计约束，也利于 TypeScript 类型校验。
const theme = { primary: 'text-blue-600 bg-white', secondary: 'text-gray-700 bg-gray-100' };- 使用方式：
className={theme.primary}—— 字符串静态、完整、无插值 - 避免混入非 Tailwind 类（如
my-custom-class），否则需额外配置safelist - 性能优势：不增加构建体积，无运行时开销，类型安全度高
真正容易被忽略的是：safelist 的正则必须用 /^...$/ 形式，且匹配的是完整类名；而 content 配置再全也救不了动态拼接——它只决定“扫哪些文件”，不改变“怎么扫”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
