启用 Tailwind 内置 Purge 功能可删除未使用类，减小 CSS 文件体积。在 tailwind.config.js 中配置 purge 选项指定文件路径，如 HTML、JS、Vue、React 文件，构建时仅保留用到的类。生产环境启用 purge，开发环境关闭以保持热重载速度。通过 package.json 设置 build 和 dev 脚本区分环境。注意避免动态拼接类名导致样式丢失，可用 safelist 保留特定类。正确配置后，输出文件可从几百 KB 减至几十 KB，显著提升性能。
在使用 Tailwind CSS 构建项目时，会生成一个非常庞大的 CSS 文件，包含所有可用的实用类。但在实际项目中，只用到其中一小部分。如果不处理，会导致页面加载变慢、性能下降。通过 PurgeCSS 可以自动删除未使用的 Tailwind 类，显著减小文件体积。
启用 Tailwind 的 Purge 功能（推荐方式）
Tailwind v1.4+ 内置了对 PurgeCSS 的支持，无需单独安装 PurgeCSS。只需在 tailwind.config.js 中配置 purge 选项，指定需要扫描的文件路径。
- 支持 HTML、JS、Vue、React 等模板文件
- Tailwind 会在构建时分析这些文件中出现的类名
- 仅保留被使用的类，其余全部移除
示例配置：
module.exports = {
purge: [
'./index.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
构建命令与环境区分
Purge 只应在生产环境中启用，开发时关闭以保证热重载速度。
立即学习“前端免费学习笔记（深入）”；
在 package.json 中设置脚本：
"scripts": {
"build": "TAILWIND_MODE=build tailwindcss build -i ./src/input.css -o ./dist/output.css",
"dev": "tailwindcss watch -i ./src/input.css -o ./dist/output.css"
}
-
build模式触发 purge 流程 -
watch模式用于开发，不清理未使用类 - 确保
input.css正确引入了 @tailwind 指令
常见问题与注意事项
使用 PurgeCSS 时容易遗漏动态类名，导致样式丢失。
- 避免拼接类名，如
class="text-{{ error ? 'red' : 'green' }}-500"，应写成完整形式 - 可使用
purge: { safelist: ['text-red-500', 'text-green-500'] }保留特定类 - 确保文件路径正确，否则会误删所有样式
- Vue/React 组件中的类也会被识别，只要路径包含在 purge 数组中
基本上就这些。只要配置好路径并在生产构建中启用 purge，Tailwind 的输出文件通常能从几百 KB 减少到几十 KB，极大提升性能。不复杂但容易忽略细节，尤其是动态类的处理。
