PurgeCSS与PostCSS结合可有效减小CSS文件体积。通过配置postcss.config.js，在生产环境下启用PurgeCSS插件，扫描HTML和JS文件，删除未使用的工具类样式。支持safelist机制保留动态生成的类名，如正则匹配的颜色或动画类，避免误删。集成到构建流程后，显著压缩输出文件，提升页面加载性能，适用于Tailwind等实用类框架项目。
在现代前端开发中，CSS 文件容易变得臃肿，尤其使用 Tailwind CSS 或其他工具类框架时。大量未使用的样式会拖慢页面加载速度。通过结合 PurgeCSS 和 PostCSS，可以在构建过程中自动删除未使用的 CSS 并压缩代码，显著减小文件体积。
配置 PostCSS 使用 PurgeCSS
PostCSS 是一个强大的 CSS 处理工具，支持插件化扩展。PurgeCSS 可作为其插件运行，扫描 HTML、JS 等模板文件，移除未被引用的样式。
第一步，在项目根目录创建 postcss.config.js 文件：
module.exports = {plugins: [
require('tailwindcss'),
require('autoprefixer'),
process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
content: [
'./**/*.html',
'./src/**/*.js'
],
defaultExtractor: content => content.match(/[\w-/:]+(? })
].filter(Boolean)
}
上述配置中，PurgeCSS 仅在生产环境启用。它会遍历所有 HTML 和 JS 文件，提取用到的类名，并清除未匹配的 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
保留必要的样式（安全剔除）
某些动态生成的类名可能不会被 PurgeCSS 正确识别，例如通过字符串拼接生成的类（如 text-${color}）。为避免误删，可使用 safelist 配置保留特定规则：
'animate-spin',
{ pattern: /bg-(red|blue|green)-(100|500)/ },
{ pattern: /text-.+-[0-9]+/, group: true }
]
这样即使这些类未直接出现在模板中，也会保留在最终 CSS 中。合理使用正则表达式能兼顾压缩效果与功能完整性。
构建并验证输出结果
将 PostCSS 集成到构建流程中，比如在 package.json 添加脚本：
"scripts": {"build:css": "NODE_ENV=production postcss src/styles.css -o dist/output.css"
}
运行命令后，检查输出文件大小和内容。你会发现原本几 MB 的样式文件可能缩小到几十 KB。同时打开浏览器开发者工具，确认页面样式未丢失或错乱。
基本上就这些。PurgeCSS + PostCSS 组合简单高效，特别适合使用实用类 CSS 框架的项目。正确配置后，既能保证视觉表现，又能大幅提升性能。不复杂但容易忽略。
