PurgeCSS删不掉class是因为它只识别静态字符串，忽略动态拼接、JS注入和模板字符串中的class；需正确配置content路径、插件顺序、避免运行时生成，并用whitelist、dry-run等手段验证。
为什么PurgeCSS删不掉你写的class
不是PurgeCSS没起作用，而是它根本没扫描到你的class名——它只认“静态出现的字符串”，动态拼接、JS注入、模板字符串里的class全被忽略。purgecss不会执行JS，也不会解析Vue/React的响应式绑定逻辑。
常见错误现象：bg-red-500在Tailwind项目里写了但没生效；hidden类在生产环境仍存在；自定义组件里用className={isShow ? 'block' : 'hidden'}，结果block和hidden都被删了。
- 确保所有HTML、JSX、Vue模板、Svelte文件都列在
content配置中，路径支持glob，比如src/**/*.{html,js,jsx,ts,tsx,vue} - 避免在JS里拼接class：
div.className = 'text-' + size + '-sm'→ PurgeCSS完全看不见 - Tailwind用户注意：
@layer或@apply生成的class必须出现在源码中，不能靠运行时生成
Webpack插件模式下PurgeCSS不生效的典型原因
用purgecss-webpack-plugin却看到CSS体积纹丝不动？大概率是插件位置错了，或者CSS没走webpack处理流程。
使用场景：老项目用webpack 4/5 + ExtractTextPlugin 或 mini-css-extract-plugin，样式分散在多个入口或异步chunk里。
立即学习“前端免费学习笔记（深入）”；
-
PurgeCSSPlugin必须放在mini-css-extract-plugin之后，否则它处理的是未提取的CSS模块，不是最终输出的CSS文件 - 确认
paths配置指向的是实际生成的HTML文件（如dist/*.html），而不是源码里的index.html - 如果用了
HtmlWebpackPlugin，且启用了inject: true，要确保它生成的HTML也被content覆盖到
PostCSS插件方式（postcss-purgecss）的坑点
看起来最轻量，但最容易漏删或误删——因为PostCSS阶段看到的是编译后的CSS，而PurgeCSS需要原始模板上下文做匹配。
参数差异明显：postcss-purgecss的content字段和独立CLI版行为一致，但若CSS本身含@import或@layer，且被PostCSS提前处理过，class引用链可能断裂。
- 不要在PostCSS里把
tailwindcss放在postcss-purgecss前面——顺序错会导致utility class还没生成就被删 - 启用
rejected: true选项，配合日志看哪些selector被判定为“无用”，比盲调配置高效得多 - 对
:not(.foo)、.bar:hover这类伪类，确保对应HTML里真有class="foo"或class="bar"，否则会被误删
怎么验证PurgeCSS真的删对了
别只信打包体积数字。上线后页面白屏、布局错乱，八成是关键class被误杀，而本地开发又一切正常——因为dev环境通常跳过PurgeCSS。
性能影响不大，但兼容性风险高：某些UI库（如Ant Design）依赖ant-btn-primary这种带连字符的class，若正则配置太激进（比如用了defaultExtractor但没覆盖Unicode），会漏匹配。
- 加
whitelist: ['html', 'body', 'active', /-enter-/]保底，尤其照顾动画类、JS驱动的临时状态类 - 用
purgecss --dry-run先跑一遍，输出将被删除的selectors列表，人工扫一眼有没有眼熟的业务class - CI里加个检查：对比dev和prod环境的
document.styleSheets[0].cssRules.length，突降超过30%就报警
最麻烦的其实是第三方组件库的class命名策略——它们往往用哈希或随机后缀，PurgeCSS默认规则抓不住，得靠whitelistPatterns硬匹配，这点很容易被忽略。
