根本原因是Tailwind JIT仅扫描源码中完整、静态、不间断的字符串类名，不解析运行时拼接结果；需通过safelist预声明或改用内联样式解决。
Tailwind CSS 无法识别动态类名，根本原因不是你写错了，而是它压根没“看见”——JIT 编译器只扫描源码中**完整、静态、不间断的字符串形式类名**，bg-[${color}] 或 text-${size}-600 这类拼接结果在构建时不存在，自然不会生成对应 CSS。
为什么动态类名会消失？content 配置救不了它
Tailwind 的 content 配置负责扫描哪些文件里用了哪些类，但它只匹配字面量字符串，不执行 JS 表达式。哪怕你把 content 写得再全，也扫不到运行时才拼出来的类名。
-
text-${error ? 'red' : 'green'}-600→ 扫描器看到的是整个模板字符串，不是text-red-600或text-green-600 -
class={`line-clamp-${lines}`}→ 源码里没有line-clamp-1、line-clamp-2等完整字符串 - 自定义颜色插值如
bg-[${theme.primary}]→ JIT 不解析变量值，只当它是普通字符串
配置 safelist 是最可控的解法（尤其适合有限取值）
当动态值范围可枚举（比如 line-clamp 只用 1–6、按钮颜色只有 primary/secondary），直接在 tailwind.config.js 中声明要保留的类或模式：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
'bg-red-500',
'hover:bg-blue-600',
{ pattern: /^line-clamp-[1-6]$/ },
{ pattern: /^text-(sm|md|lg)-\d+$/ },
{ pattern: /^hover:bg-(primary|secondary)-\d+$/ }
],
theme: { extend: {} },
plugins: []
}- 字符串字面量（如
'bg-red-500'）用于高频固定类 -
pattern用正则匹配批量类，注意必须用RegExp字面量（/^...$/），不能写字符串 - 改完必须重启开发服务器（
npm run dev或pnpm dev），JIT 缓存不会自动更新
什么时候该放弃 safelist，改用内联样式？
当动态值完全不可控时，比如：
立即学习“前端免费学习笔记（深入）”；
- 来自 API 的任意数字：
line-clamp-${apiResponse.lines}（可能为 0、100、甚至负数） - 用户输入的颜色 HEX 值：
bg-[${userInput}] - 第三方库传入的非预设尺寸/间距
这时硬塞进 safelist 既难维护又膨胀体积，直接上内联样式更稳妥：
<div style={{ WebkitLineClamp: lines, display: '-webkit-box', WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{longText}
</div>注意：CSS 属性名要用驼峰（WebkitLineClamp），且需补全 -webkit- 前缀才能生效。
容易被忽略的关键点
很多人配了 safelist 却发现还是没用，问题往往卡在三个地方：
- 正则写错：比如
/line-clamp-\d+/缺少^和$，会误匹配到my-line-clamp-1-extra - 路径没覆盖组件文件：
content漏了./components/**/*.{js,jsx}，导致组件里写的静态类都没扫到，safelist 更无从谈起 - 开发服务器没重启：修改
safelist后仍用旧缓存，CSS 文件里压根没生成新规则
