purgecss 不删除动态生成的 class，只识别源码中静态出现的 class 字符串；需通过 safelist、whitelistpatterns 或 defaultextractor 处理动态情况，并确保其在 css 压缩前执行。
为什么 PurgeCSS 没删掉你写的 class？
它不解析运行时生成的 class，只扫描源码中**静态出现的字符串**。比如 v-if="show ? 'active' : 'hidden'" 或 classList.add(dynamicClass) 这类动态拼接，PurgeCSS 看不见。
- 确保所有用到的 class 名在模板、JSX、Vue SFC 的
<template></template>或<style scoped></style>中以纯文本形式出现 - 如果用了 Tailwind + 动态 class（如
class="text-${size}-sm"），得在content配置里加defaultExtractor或显式列出白名单whitelistPatterns: [/^text-/, /^bg-/] - Vue 项目注意：
<style scoped></style>里的 class 会被自动加上属性选择器（如.btn[data-v-f3f3f]），PurgeCSS 默认能识别；但如果你手动写了[data-v-xxx]在 JS 里切换 class，就得把这类属性也加进extractors
PurgeCSS 和 PostCSS 插件的执行顺序很重要
必须让 PurgeCSS 在 CSS 压缩（如 cssnano）之前运行，否则压缩后 class 名被重命名或内联，PurgeCSS 就找不到原始匹配了。
- Webpack 场景下，检查
postcss.config.js里插件顺序：purgecss必须在cssnano之前 - Vite 用户注意：
vite-plugin-purgecss默认已处理顺序；但若手动配了build.cssCodeSplit = false，要确认它仍作用于最终合并后的 CSS 字符串 - Next.js（13+ App Router）需配合
@next/bundle-analyzer验证产物体积，因为purgecss可能被swcCSS 提取逻辑绕过
如何验证 PurgeCSS 真删了哪些规则？
别只看文件大小变化——可能只是压缩率提升。得看实际移除了哪些选择器。
- 启用
rejected: true选项（或 CLI 的--rejected），它会输出被删掉的选择器列表 - 搭配
dryRun: true先试跑，不写入文件，只打印统计：{ "css": "xx KB", "safelist": [], "rejected": 1240 } - 常见误删：图标字体 class（如
icon-home）、JS 控制的动画 class（is-animating）、BEM 的修饰符（btn--large被当成未使用）——这些都得进safelist
Tailwind 用户：别重复配置 PurgeCSS
Tailwind v3+ 内置了 content 配置，本质就是 PurgeCSS 的封装。再额外装 purgecss 插件反而容易冲突。
- 删掉
postcss.config.js里多余的purgecss插件，只留tailwindcss和autoprefixer - 确保
tailwind.config.js的content数组覆盖所有模板路径：["./src/**/*.{js,jsx,ts,tsx,vue}"]，别漏掉.mdx或.svelte - 开发时想临时禁用（比如调试样式），加环境变量：
TAILWIND_MODE=watch npm run dev，避免 purge 干扰热更新
safelist 或 whitelistPatterns，这点最容易被跳过——体积数字好看，但页面一交互就丢样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
