PurgeCSS误删类名？动态白名单设置教程

PurgeCSS 并非“误删”类名，而是因其仅能识别源码中静态出现的字符串字面量（如 `class="btn active"`），对动态拼接（如 `className={`btn-${type}`}`）、JS 注入（如 `el.classList.add('hidden')`）或模板语法中的类名完全不可见——这不是缺陷，而是设计使然；要确保关键样式不丢失，必须通过 `safelist` 显式声明动态类模式，合理使用正则、glob 或函数式写法精准匹配前缀、响应式变体或组合规则，同时警惕构建工具（Webpack/Vite）和第三方库带来的扫描盲区，并借助 `debug: true`、临时禁用 `content` 或 CLI 独立测试等手段精准定位被删类名，从根本上告别“样式莫名消失”的调试困境。

为什么PurgeCSS会删掉你明明用到的 class

PurgeCSS 不是误判，而是根本没“看见”那些类名。它只扫描源码中静态出现的字符串字面量，比如 class="btn active" 或 className="text-red-500"；对 className={`btn-${type}`}、el.classList.add('hidden')、甚至 :class="['icon-' + name]" 这类运行时拼接或 JS 注入的写法，它完全不处理——不是不想，是做不到。

动态类名必须显式加到 safelist 才安全

别指望 PurgeCSS 自动推导模板字符串结果。最可靠的方式是把已知模式直接写进 safelist，它优先级最高，且不依赖文件扫描路径是否覆盖到位。

• 用正则匹配固定前缀：/^text-(red|blue|green)-[0-9]{3}$/ 保留下划线色值类
• 用 glob 字符串通配响应式变体："md:text-*"、"hover:opacity-*"
• 函数式写法更可控：{ pattern: /^(?:md|hover):text-(?:red|blue)-(?:500|600)$/ }
• 避免 /text-.*/ 这种宽泛正则——它可能意外保留 text-clip 这类原生属性

PostCSS 插件里 content 路径再全也没用

很多人以为只要 content: ['./src/**/*.{js,jsx,ts,vue}'] 就万事大吉，但问题常出在：Vue 单文件组件里的