启用PurgeCSS后类名消失，通常不是压缩工具把类名“改了”，而是 PurgeCSS 误删了未识别的类名。处理时应重点检查配置路径、启用 safelist 或正则匹配，并通过 rejected 选项验证被删类名。

如果在构建流程里启用了 PurgeCSS，发现最终产出的 CSS 文件中，原本熟悉的类名，比如 .btn-primary、.text-center，突然不见了，甚至变成了像 .a1b2c 这样特别短的哈希类名，先别急着把锅甩给压缩工具。

问题的关键通常不在“改名”，而在于 PurgeCSS 把它判定为“未使用”的规则清掉了。

更常见的情况是：实际用到的类被误判了，或者那些动态生成的类名，你根本没有明确告诉它该去哪里识别。

确认 PurgeCSS 是否真的在运行

先打开终端，执行生产构建命令，如 yarn build 或 npm run build，观察控制台输出是否出现 PurgeCSS 相关日志。

如果没有任何提示，说明插件未被加载，或配置路径错误。

再检查 postcss.config.js 中 @fullhuman/postcss-purgecss 是否只在 process.env.NODE_ENV === 'production' 时启用。开发环境下它默认不工作，这是正常行为。

【必须确保 content 数组覆盖所有模板文件】

• ['./src/**/*.{js,jsx,ts,tsx,vue,html}']
• 如果漏掉一个 .vue 文件，里面用的 class="modal-open" 就会被删。

Tailwind 用户请优先用内置 purge

如果你项目已用 Tailwind v2.0+，根本不需要单独装 PurgeCSS。

直接在 tailwind.config.js 的 purge 字段写路径即可：

purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}']

这个内置机制比手动接 PostCSS 插件更稳定。它能自动识别 @apply、class={...}、v-bind:class 等框架语法，且默认跳过开发环境。

注意：v3.0+ 已改名为 content，写法为 content: ['./src/**/*.{js,jsx,ts,tsx,vue}']，旧版 purge 字段将被忽略。

保留动态生成的类名

方法一：用 safelist 写死关键类

在 PurgeCSS 配置中加入 safelist: ['active', 'show', 'hidden', 'fade-enter-active']。

这适合数量少、名称固定的类。

方法二：用正则匹配模式化类名

拿 Tailwind 的颜色类来说，像 text-red-500、bg-blue-200 这类写法，可以补上一条规则：

{ pattern: /text-(red|blue|green|yellow)-(100|200|300|400|500)/ }

这样一来，凡是能匹配上这条规则的类名都会被保留下来。即便它们没有直接写在 HTML 里，也不会被漏掉。

方法三：保留 JS 注入的类

如果代码里有 el.classList.add('is-loading') 或 div.className = 'tooltip-' + position，这些不会被扫描到。

必须显式加入 safelist：'is-loading' 或 /^tooltip-/。

正则写错会导致整批类丢失

• 比如写成 /text-red-/ 会漏掉 text-red-500（末尾数字没匹配）
• 应写 /text-red-[0-9]+/
• 或更稳妥的 /text-red-[0-9]{2,3}/

验证哪些类被删了

• 第一步：在 PurgeCSS 配置中启用 rejected: true 选项。
• 第二步：重新运行构建，查看终端输出的 REJECTED 列表，这里会逐行列出所有被删除的选择器。
• 第三步：对照你的业务逻辑，检查列表中是否有本该保留的类。如果有，立即加进 safelist。
• 第四步：删掉 rejected: true，避免日志刷屏影响 CI 流程。