purgecss 清理不准是因为它只扫描源码字符串字面量，不执行 vue 编译，故无法识别 class="btn {{ type }}-btn" 中的 primary-btn 等动态类名；必须用绝对路径配置 content、正确设置插件顺序、添加 safelist 正则并禁用 cssnano 重复清理。
Vue 项目里 PurgeCSS 清理不准，不是它“不聪明”，而是它根本没看到你真正用的类名——class="btn {{ type }}-btn" 这种写法在源码里是模板字符串，PurgeCSS 不执行 Vue 编译，只扫字面量，primary-btn 和 danger-btn 它压根没见过。
content 路径扫不到编译后的 class 字符串
常见错误是直接配 ./src/**/*.vue，尤其在 Windows 下路径分隔符失效；更关键的是，它读的是未编译的 <template></template> 块，里面是 class="btn {{ type }}-btn"，不是真实类名。
- 必须用绝对路径 + 显式扩展名：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}') - Vite 用户优先用
vite-plugin-purgecss，它在 Rolluptransform钩子后运行，能拿到已编译的 JS 字符串 - Webpack 用户用
purgecss-webpack-plugin，别手写new PurgeCSSPlugin()，否则插件在vue-loader前就跑了 - 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在content范围内，得手动加进content数组，否则整段 CSS 被清空
默认提取器不认识 Vue 绑定语法和变体类名
:class="{ 'is-open': isOpen }"、class="hover:bg-blue-500 group-hover:text-red-500" 这些都不会被默认提取器捕获——它不解析属性值结构，也不展开 Tailwind 变体。
- 在
safelist加正则：/^(hover|focus|active|group-hover|data)-/、/\[.*\]/、/^is-/ - 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face被连带清除 - 对
[&_svg]这类嵌套选择器，要么升级到 Tailwind v3.3+ 用其原生逻辑，要么自定义defaultExtractor - 第三方组件库（如 Element Plus、Ant Design Vue）的类名需显式保留在
safelist中，例如：['el-button', /^el-/]
PostCSS 插件顺序错导致 CSS 全空
构建后 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 报 “CSS 规则数为 0”，基本就是插件顺序崩了。
- 正确顺序必须是：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano默认开启discardUnused: true，和 PurgeCSS 功能重叠，必须关掉：{ discardUnused: false } - Tailwind 项目别额外装
@fullhuman/postcss-purgecss——它和tailwindcss内置 Purge 功能冲突，删掉postcss.config.js里多余的插件即可 - 别在
devtool: 'source-map'开启时跑 PurgeCSS，source map 会污染类名匹配，导致漏删
最难的从来不是配置项怎么填，而是确认所有动态类都落在 PurgeCSS 的视野里：它不猜、不执行、不推断，只信你给它的字符串和正则。漏一个 safelist 正则，或错一个插件顺序，线上就可能丢样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
