启用Tailwind的purge选项可显著减小CSS体积，通过扫描文件删除未使用类，并支持safelist保留动态样式，仅在生产环境生效，需正确配置文件路径和处理动态类名以避免误删。
在使用 Tailwind CSS 的项目中，样式文件体积往往较大，因为 Tailwind 默认生成大量实用类。PurgeCSS 可以扫描项目中的 HTML、JavaScript 等模板文件，自动删除未使用的 CSS，显著减小最终打包体积。结合 Tailwind 使用 PurgeCSS 是优化
前端
性能的关键步骤。
启用 Tailwind 的 purge 选项
Tailwind v1.4+ 内置了对 PurgeCSS 的集成（新版本中称为“tree-shaking”），不再需要手动安装 PurgeCSS。你只需在
tailwind.config.js
中配置
purge
选项，指定需要扫描的文件路径：
指定所有可能引用 Tailwind 类的文件，如 .html、.js、.jsx、.ts、.vue、.svelte 等路径支持 glob 模式，确保覆盖所有模板和组件
示例配置：
区分开发与生产环境
PurgeCSS 会移除未使用的样式，影响开发时的预览效果，因此只应在生产构建时启用。
立即学习
“
前端免费学习笔记（深入）
”；
Midjourney AI 提示词工具
PHP中文网提供Midjourney AI 提示词在线生成工具，专为解决 AI 绘画“词穷”痛点而生，用户只需输入“一只猫”等简单想法，工具便能利用 AI 智能扩展出包含艺术风格、光影构图、镜头参数及负面提示词的专业级英文 Prompt。它完美兼容 Midjourney V8.1 及 Niji 模型，支持一键复制与参数自动优化，大幅降低创作门槛，是提升出图质量与效率的必备辅助神器。
下载
Tailwind 自动根据环境判断是否执行 purge：只有在production模式下才会清理 CSS确保构建脚本设置 NODE_ENV=production，例如 Webpack 或 Vite 构建时开发环境下保留所有类，便于调试和实时预览
避免误删关键样式
动态类名（如拼接字符串）可能被误判为未使用，导致样式丢失。
避免用字符串拼接方式生成类名，如class="text-{{ error ? 'red' : 'green' }}-500"使用完整类名或通过 safelist 手动保留动态用到的类在配置中添加 safelist，确保某些类不被清除：
也可使用正则保留一类名称：
验证优化效果
构建完成后，检查生成的 CSS 文件大小变化。
未优化前 Tailwind 可能输出 >3MB 的 CSS启用 purge 后通常可压缩至几十 KB 到几百 KB使用工具如source-map-explorer或浏览器DevTools 分析最终资源
基本上就这些。只要配置正确，Tailwind + purge 能在不影响功能的前提下极大提升加载性能。不复杂但容易忽略的是路径匹配和动态类处理，务必仔细检查。
module.exports = {
purge: [
'./index.html',
'./src/**/*.{js,jsx,ts,tsx,vue}'
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
purge: {
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
options: {
safelist: ['text-red-500', 'bg-blue-600', 'hidden']
}
}
safelist: [
{ pattern: /text-(red|green|blue)-(500|600)/ },
{ pattern: /bg-(gray|indigo)-./ }
]