Tailwind动态类名失效的根本原因是JIT编译器仅静态扫描源码中完整字面量类名，无法识别text-${color}-600等模板插值，导致对应CSS规则未生成；解决方案包括预定义完整类名、配置safelist或使用内联style。
动态类名在爬虫中失效，是因为前缀/后缀不可靠
网页抓取时遇到 class="media-story-card__body__3tRWy" 这类名字，表面看有固定部分，但实际匹配失败常因两件事：一是前缀本身会变（比如从 media-story-card__body__ 升级为 story-card-body__），二是随机段可能插在中间而非末尾（如 __3tRWy__v2）。此时用 [class^="media-story-card__body__"] 会漏掉新版本，[class*="story-card-body"] 又可能误中其他组件。
React/Vue 中动态拼接类名不生效，不是 DOM 问题而是构建缺失
Tailwind 的 JIT 编译器只认源码里写死的完整字符串，className={`text-${color}-600`} 在构建阶段看到的只是模板字面量，根本不会生成 text-blue-600 对应的 CSS 规则。浏览器里 class 属性显示正常，但查 dist/*.css 文件会发现该类名压根不存在——这不是优先级或 !important 能解决的。
- 开发服务器和生产构建都会失效，不是环境差异
-
content配置再全也救不了，它只决定扫哪些文件，不改变“怎么扫” - 哪怕
color = 'blue'是 const 常量，只要没直接写出text-blue-600，就不会进最终 CSS
safelist 不是万能兜底，正则写错就等于没写
当必须支持用户输入的 HEX 或 API 返回的任意字符串时，safelist 是唯一合规入口，但它对写法极其敏感：
- 匹配完整类名：
{ pattern: /^bg-[a-f0-9]{6}$/ }✅，/bg-/❌（太宽泛） - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/✅，/text-red-500$/❌（漏掉md:等前缀） - 改完必须重启 dev server，缓存不自动更新
内联 style 是最后防线，但别滥用
遇到完全不可控的值（如实时计算的 opacity、backgroundPosition、url(${src})），硬套 Tailwind 类名只会徒增构建体积和维护成本。直接用 style 属性更可靠：
立即学习“前端免费学习笔记（深入）”；
<div style={{ backgroundImage: `url(${src})`, opacity: alpha }}>
它绕过所有构建限制，100% 运行时生效，但要注意：CSS 变量、伪元素、媒体查询这些无法通过 style 实现，得回到预定义类或 safelist。
