vite-plugin-purgecss更可靠，因其在vite transform后、generatebundle前运行，能提取ast解析后的实际类名，而postcss插件在此前执行，仅扫描模板语法无法识别动态类。
为什么vite-plugin-purgecss比PostCSS插件更可靠
因为Vite的构建流程中，.vue和.tsx文件在PostCSS运行前还没被转换成含真实class字符串的JS，PurgeCSS插件若放在PostCSS链里，扫到的还是class="btn {{ type }}"这种模板语法，根本提取不出btn-primary。而vite-plugin-purgecss在transform钩子之后、generateBundle之前运行，此时AST已解析完成，能拿到实际拼接出的类名字符串。
常见错误现象：npm run build后hover:bg-blue-500失效、is-open类消失、Lighthouse显示“CSS规则数为0”——基本都是用了@fullhuman/postcss-purgecss但没调对顺序，或压根没启用它。
实操建议：
- 卸载
@fullhuman/postcss-purgecss，删掉postcss.config.js里对应插件项 - 安装
vite-plugin-purgecss（注意不是vite-plugin-purgecss的旧版别名） - 确保Vite版本≥4.3，否则content自动探测默认关闭，必须手动配
content路径必须覆盖所有动态类来源
vite-plugin-purgecss只认你content数组里明确列出的路径下出现的字符串字面量，不会推断className={`modal ${isOpen ? 'is-open' : ''}`里的is-open，除非这个字符串真出现在某个.ts或.vue文件里。
Windows下用path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}') 比硬写./src/**/*更稳；漏掉public/index.html会导致内联class="hero-banner"被误删。
实操建议：
- content数组至少包含：
['./src/**/*.{js,ts,jsx,tsx,vue}', './public/index.html'] - 若用
vite-plugin-css-injected-by-js注入样式，必须把JS输出路径也加进content，否则注入的CSS全被清空 - Next.js项目额外加
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx}，否则dark:、group-变体丢失
safelist要覆盖Tailwind变体和属性选择器
默认提取器按单词边界切分，hover:bg-blue-500会被拆成hover和bg-blue-500，前者匹配失败；[data-state=open]、[&_svg]这类语法直接被跳过——结果就是交互状态样式全丢、图标不显示。
实操建议：
- 加正则白名单：
/^(hover|focus|active|group-hover|data)-/、/\[.*\]/、/^is-/ - Tailwind项目禁用
fontFace: true和keyframes: true，除非你真用到了自定义字体或动画，否则可能连@font-face都删掉 - 第三方库如Element Plus，加
['el-button', 'el-input', /^el-input--/]，避免尺寸类el-input--small被误删
构建后验证是否真生效，别信体积数字
打包体积减少≠PurgeCSS在工作。开发时npm run dev正常，不代表npm run build也正常——JIT模式只在生产构建中真正裁剪。
最准验证法：在任意被content覆盖的文件里加一行className="bg-hotpink text-9xl"（bg-hotpink是Tailwind默认不带的颜色），然后跑生产构建：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
再执行：grep -o "bg-hotpink" ./dist/output.css。如果返回非空，说明JIT根本没启动，还在全量输出；如果为空，且grep -o "text-lg" ./dist/output.css | wc -l显著少于源码中出现次数，才是真裁剪。
真正难的不是配参数，是确认每个动态类名都有对应路径被扫描、每个变体都有正则兜底、每次构建都走对了模式——漏一个环节，就白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
