安全列表（safelist）不是兜底开关，而是需精准匹配动态类名的白名单机制；写错正则、漏配content路径或忽略响应式前缀均会导致规则失效，且修改后必须重启开发服务器。
直接结论：安全列表（safelist）不是“兜底开关”，而是精准匹配动态类名的白名单机制；写错正则、漏配 content 路径、或忽略响应式/状态前缀，都会导致规则完全失效。
为什么 safelist 里写了类名却还是被删了
常见错误现象：bg-red-500 在开发时正常，构建后消失；md:text-red-500 根本没生成 CSS；Vue 的 :class="`text-${color}-600`" 渲染出 class 属性但无样式。
- 根本原因：PurgeCSS 只扫描源码中**字面量出现的完整字符串**，不执行 JS、不展开模板字面量、不推测变量值
-
safelist不是“只要写了就保”，它只对content已扫描到的文件生效——如果content漏了.tsx或组件库路径，safelist压根没机会触发 - 单个字符串写法（如
'bg-red-500'）只保这个精确类；md:text-red-500必须显式匹配，不能靠text-red-500推导
safelist 正则必须包含前缀和变体
错误写法：/^text-red-\d+$/ → 漏掉 hover:text-red-500、md:text-red-500
正确写法需把所有可能前缀纳入非捕获组：
safelist: [
{ pattern: /^(?:md|lg|hover|focus):text-red-(?:500|600)$/ },
{ pattern: /^text-(red|blue|green)-\d+$/ },
{ pattern: /^bg-\[#([0-9A-F]{6}|[0-9A-F]{3})\]$/ }
]
- 用
(?:...)而非(...)，避免正则语法错误导致整条规则失效 - 不要用
.*宽泛匹配（如/^bg-.*/），它会保留bg-clip、bg-origin等原生属性，体积暴增 - 数字范围尽量收敛：
/^line-clamp-[1-6]$/比/^line-clamp-\d+$/更安全
字符串形式 vs 正则形式怎么选
字符串形式适合零星关键类，正则适合批量模式，但二者逻辑不同：
-
'bg-opacity-50'：只保留这一个类，无歧义，适合 UI 框架强制需要的类 -
{ pattern: /text-(red|indigo|emerald)-600/ }：匹配运行时可能出现的所有组合，但要求你穷举所有合法取值 - 若 color 来自 CMS 或用户输入（如
item.class = "text-[#3b82f6]-600"），必须用带括号的自定义语法 + 对应正则：/^text-\[#[0-9A-F]{6}\]-600$/ - 混入自定义类（如
my-btn）必须额外加进safelist，否则 PurgeCSS 会一并清除
content 配置错了，safelist 就是摆设
常见错误现象：本地开发正常，CI 构建后大量类名丢失；Next.js 项目深色模式类全没了。
- React/TSX 项目必须显式包含
"./src/**/*.{js,jsx,ts,tsx}"—— 漏掉.tsx后缀，整个组件目录不会被扫描 - Next.js 需同时覆盖 pages、app、components 目录：
"./src/app/**/*.{js,jsx,ts,tsx}"和"./src/components/**/*.{js,jsx,ts,tsx}" - 使用第三方 UI 库（如
@acme/ui）时，必须把它的源码路径加入content，否则其中的动态类名无法被识别 - 启用
purge: { debug: true }后构建，控制台会打印哪些类被保留、哪条safelist规则命中了多少类——这是验证是否生效的唯一可靠方式
最易被忽略的一点：修改 safelist 后必须重启开发服务器，Tailwind 缓存不会自动更新；而生产构建中，content 路径一旦写错，再宽的正则也救不回丢失的类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
