PurgeCSS没生效需同时满足三条件：生产环境构建、content路径真实覆盖所有class来源文件、CSS必须经PostCSS流程；90%问题源于content配置错误或缺失safelist。
purify-css，否则构建会出兼容问题，尤其在 Webpack 5+ 或 Vite 环境下。
为什么 PurgeCSS 没生效？先查这三处硬性条件PurgeCSS 不是“配了就删”，它依赖三个前提同时成立：
- 构建流程必须处于生产环境：比如
process.env.NODE_ENV === 'production'，开发模式下默认跳过净化
-
content 路径必须真实存在且可读：写成 ./src/*/.{js,jsx,ts,tsx,vue} 却漏掉 .html 或 .svelte，动态类名就扫不到
- CSS 文件必须经过 PostCSS 流程：如果用了
css-loader 但没接 postcss-loader，插件根本没机会运行
process.env.NODE_ENV === 'production'，开发模式下默认跳过净化content 路径必须真实存在且可读：写成 ./src/*/.{js,jsx,ts,tsx,vue} 却漏掉 .html 或 .svelte，动态类名就扫不到css-loader 但没接 postcss-loader，插件根本没机会运行常见错误现象：npm run build 后 CSS 体积毫无变化，或只删了几个选择器。这时直接运行 grep -o ".text-xl" dist/*.css | wc -l 对比源文件，确认是否真被处理。
content 配置写错，90% 的误删都源于此content 不是“大概扫一下”，它是 PurgeCSS 唯一的类名来源。路径写窄、扩展名漏掉、模板语法不匹配，都会导致类名提取失败。
- 必须覆盖所有可能写
class 的地方：Vue 项目要包含 ./src/*/.vue 和 ./public/index.html；Next.js v14+ App Router 则必须加 ./app/*/.{js,ts,jsx,tsx}
- 动态拼接类名不会被自动识别：像
class={${isActive ? 'text-blue-600' : 'text-gray-400'} 这种，PurgeCSS 默认只提取字面量字符串，得靠 safelist 补救
- 第三方组件库的 class 不在你源码里：比如
react-datepicker 渲染时插入的 react-datepicker__day，得手动加进 safelist 或显式扫描 node_modules/react-datepicker/*/.js
safelist 不是可选项，而是防崩底线
不设 safelist 就像开车不系安全带——上线后按钮变透明、动画消失、响应式断点失效，都是因为关键类被删了。
- 静态白名单：直接写死必须保留的类，比如
['animate-pulse', 'modal-open']
- 正则白名单：应对 Tailwind 的原子类，如
{ pattern: /^bg-/ } 保底所有背景色，{ pattern: /text-\w+-[0-9]+/ } 覆盖 text-red-500 类型
- 注意 group 匹配：加
group: true 可让正则一次匹配多个相关类，避免漏保
class 的地方：Vue 项目要包含 ./src/*/.vue 和 ./public/index.html；Next.js v14+ App Router 则必须加 ./app/*/.{js,ts,jsx,tsx}
class={${isActive ? 'text-blue-600' : 'text-gray-400'} 这种，PurgeCSS 默认只提取字面量字符串，得靠 safelist 补救react-datepicker 渲染时插入的 react-datepicker__day，得手动加进 safelist 或显式扫描 node_modules/react-datepicker/*/.js
safelist 就像开车不系安全带——上线后按钮变透明、动画消失、响应式断点失效，都是因为关键类被删了。
- 静态白名单：直接写死必须保留的类，比如
['animate-pulse', 'modal-open'] - 正则白名单：应对 Tailwind 的原子类，如
{ pattern: /^bg-/ }保底所有背景色，{ pattern: /text-\w+-[0-9]+/ }覆盖text-red-500类型 - 注意 group 匹配：加
group: true可让正则一次匹配多个相关类，避免漏保
错误现象：Cannot read property 'backgroundColor' of undefined，实际是 JS 通过 getComputedStyle 读取已被删的 bg-red-500 样式，说明 safelist 没兜住。
Tailwind 用户最容易忽略的 v3+ 配置陷阱
Tailwind v3.0 起彻底弃用 purge 字段，改用顶层 content 数组。很多人沿用旧配置，结果 PurgeCSS 根本不启动。
-
tailwind.config.js 中必须写成：module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx,vue}',
'./public/**/*.html'
],
// 不要再写 purge: { enabled: true, content: [...] }
}
- 如果用了 Vite，确保
vite.config.js 中已启用 postcss 插件，且 postcss.config.js 在项目根目录
-
TAILWIND_MODE=build 环境变量只在 CLI 手动构建时有效，CI/CD 中应统一走 NODE_ENV=production
tailwind.config.js 中必须写成：module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx,vue}',
'./public/**/*.html'
],
// 不要再写 purge: { enabled: true, content: [...] }
}
vite.config.js 中已启用 postcss 插件，且 postcss.config.js 在项目根目录TAILWIND_MODE=build 环境变量只在 CLI 手动构建时有效，CI/CD 中应统一走 NODE_ENV=production
真正难的不是配置，而是判断哪些类该留、哪些能删——这得靠线上灰度 + Lighthouse 的 Coverage 面板交叉验证，不能只信本地构建输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
