启用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 流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
