Tailwind v3的safelist仅在生产构建（NODE_ENV=production）时生效，开发模式下JIT全量生成且不读取safelist；配置须置于tailwind.config.js顶层、与content同级，字符串需大小写及连字符精确匹配，正则应收敛避免过度匹配。
为什么 tailwind.config.js 的 safelist 不生效
因为 Tailwind v3 的 safelist 只在生产构建（NODE_ENV=production）时起作用，开发模式下 JIT 编译直接全量生成，根本不会读取 safelist —— 所以你在本地看不到效果，不是配置错，是压根没触发。
常见错误包括：
- 把
safelist写在module.exports = { theme: { ... }, safelist: [...] }里 → 它必须和content同级，属于顶层配置项 - 用字符串匹配但写错了大小写或连字符，比如
'bg-blue500'（漏了横线）→ 实际类名是bg-blue-500 - 正则写成
/bg-.*/→ 匹配太宽，会保留所有bg-类，体积反弹；应收敛为/^bg-(red|blue|emerald)-\d+$/
动态类名必须用正则白名单，字符串白名单只保固定组合
像 class={`${isActive ? 'text-blue-500' : 'text-gray-400'}` 这种三元表达式，Tailwind 能静态分析出两个类，safelist 不需要加；但 class={`text-${color}-500`} 这种运行时拼接，它完全无法推断 color 的值，必须靠 safelist 兜底。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 字符串白名单：适合已知全部取值，如
'prose'、'bg-opacity-50' - 正则白名单：用于变量驱动场景，如
/^text-(red|blue|indigo)-\d+$/、/^border-(t|b|r|l)-/ - 避免
/^w-/这类无约束前缀，它会让整个宽度工具集保留，失去 Purge 意义
第三方组件类名不能靠 content 扫，得进 safelist 或关 preflight
你写了 <datepicker class="w-full text-sm"></datepicker>，但 w-full 和 text-sm 在构建后消失，不是因为 content 没扫到组件库源码 —— 是因为你根本不需要扫它。Tailwind 只负责处理你模板里写的类，DatePicker 自身的类（如 date-picker__input）由它自己的 CSS 提供。
真正要防丢的是你「主动传给第三方组件」的类名，解决路径只有两条：
- 把它们加进
safelist：比如['w-full', 'max-w-md', /^rounded-/] - 如果问题源于
@layer base的 preflight 重置（例如按钮变透明），优先设corePlugins: { preflight: false }，再局部重置需要的元素
强行往 content 里加 node_modules/xxx/**/*.js 不仅慢，还可能因路径不合法（未以 ./ 开头）被静默忽略。
build 后样式还在但体积没变小？检查这三处硬性条件
Tailwind 的裁剪不是“配了就生效”，它有三个不可绕过的前提：
-
NODE_ENV必须为production，否则content和safelist全部不参与构建 - 构建命令必须显式带
--minify（CLI）或启用 PostCSS 压缩（Vite/Next 等需确认插件链） -
content数组不能为空，且至少有一个路径能实际匹配到含类名的文件；空数组或全路径失效 = 全量输出
最容易被忽略的是第一点：很多脚本写成 "build": "tailwindcss -i ... -o ... --minify"，却没设环境变量，结果打包出来还是 3MB 的全量 CSS。
