PurgeCSS 删除动态拼接类名是因为其仅静态分析源码中的字面量类名，无法识别模板字符串、变量拼接等运行时生成的类名；需通过 safe-list 显式保留或配置 extractors 提取动态类名。
为什么 PurgeCSS 会删掉动态拼接的类名
PurgeCSS 是静态分析工具，只扫描源码中明确写出的类名字符串。它看不到运行时 class={`${prefix}-btn ${size}-text`} 这种模板字符串拼接结果，也不会执行 JS 逻辑去推导最终类名。一旦类名不是字面量（比如带变量、函数调用、条件表达式），PurgeCSS 就默认“没用到”，直接剔除对应 CSS 规则。
- 常见错误现象：
btn-primary在 HTML 里硬编码能保留，但cls = `btn-${type}`+className={cls}后样式消失 - Vue 中
:class="[`icon-${name}`]"、React 中className={`card card--${variant}`}都属于高危写法 - Webpack 插件模式下，若未配置
content覆盖所有 JS/TS 文件路径，连字面量类名都可能漏扫
safe-list 是最直接可控的兜底方案
不用改业务代码，也不依赖插件自动识别，safe-list 显式声明“这些类名不管怎么出现，一律保留”。适合已知类名模式固定、但生成方式不静态的场景。
- 支持正则：
/^bg-(red|blue|green)-[0-9]{3}$/可保留下划线分隔的色值类 - 支持 glob 字符串：
"text-*"匹配所有text-left、text-sm类 - 注意顺序：PurgeCSS 按
safe-list逐条匹配，正则优先级高于字符串，冲突时以靠前条目为准 - 别写太宽泛的正则，比如
/^.*$/或"*"，会导致整张 CSS 表几乎不删减
PostCSS 插件配合 extractors 处理 JSX/TSX 中的动态类
原生 PurgeCSS 对 JSX 语法支持有限，extractors 允许你自定义类名提取逻辑。社区已有成熟方案，比如 @fullhuman/postcss-purgecss 配合 purgecss-from-js 提取器。
- 必须启用
defaultExtractor并覆盖extractors数组，否则 JS 文件里的类名根本不会进分析流程 - Vue 用户需额外加
purgecss-from-svelte或purgecss-from-vue，否则<div :class="xxx"> 完全不可见 <li>性能影响：开启 extractor 后扫描速度下降约 20–40%，大型项目建议只对 <code>.jsx/.tsx文件启用 - 示例配置片段：
extractors: [{ extensions: ['js', 'jsx', 'ts', 'tsx'], extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }] - Webpack 中临时注释掉
PurgeCSSPlugin或设enabled: false - Vite 用户可在
vite.config.ts的build.cssCodeSplit关闭后观察是否仍有缺失 - 如果关掉 PurgeCSS 后样式仍不生效，说明问题在 CSS 加载顺序、CSS Modules 隔离或 Tailwind 的
@layer声明位置 - 别在 CI 环境反复试错 —— 动态类名的 safe-list 往往需要结合真实运行时日志补全，本地开个 console.log 打印出所有生成的类名更可靠
开发阶段关掉 PurgeCSS 更快定位问题
很多“样式丢失”其实不是 PurgeCSS 删错了，而是 CSS 优先级、作用域或构建链路本身出问题。先排除干扰，再精准加 safe-list，效率更高。
立即学习“前端免费学习笔记（深入）”；
