tailwind css 文件大是因为默认包含所有工具类，需通过 v3+ 的 content 字段配置扫描路径并配合 safelist 白名单防止误删，且仅生产构建生效。
为什么 Tailwind 的 CSS 文件那么大？
因为默认生成的 tailwind.css 包含了所有工具类（如 text-red-500、md:flex、hover:scale-105），哪怕你一行都没用，它也全在。开发时方便，上线就成负担——动辄几百 KB，纯浪费。
根本原因不是 Tailwind 本身臃肿，而是没告诉它「哪些类实际被用到了」。PurgeCSS（现在叫 purge 配置项）就是干这个的：扫描源码里的类名字符串，只保留命中的规则。
怎么配 purge 才不漏删、不误删？
关键在路径和语法匹配。Tailwind v3+ 已内置 PurgeCSS，只需在 tailwind.config.js 里正确声明扫描范围：
-
purge已废弃，必须用content字段（v3.0+） - 路径要覆盖所有可能写 class 的地方：
src/**/*.{js,jsx,ts,tsx,html,vue}，不能只写src/*.js - 如果用了动态拼接类名（如
class={`${isActive ? 'bg-blue-500' : 'bg-gray-200'}`），得用正则白名单保底：safelist: [/^bg-/, /^text-/] - 模板字符串、JSX 属性、HTML 注释里的 class 不会被识别，别指望它猜
常见误删场景和应对方式
上线后按钮变黑、动画消失、响应式断点失效？大概率是 content 漏扫或动态类没兜住：
- 框架组件库的 class（如
react-datepicker）不在你源码里 → 加到safelist或用./node_modules/xxx/**/*.js扫包内文件 - 服务端渲染（SSR）时 HTML 是后生成的 → 确保
content包含生成 HTML 的模板路径（如pages/**/*.html.ejs） - 用
className={styles.button}这种 CSS Modules 写法 → PurgeCSS 不处理，得靠构建插件（如postcss-modules）配合 - 错误现象：
Cannot read property 'backgroundColor' of undefined—— 实际是bg-red-500被删了，但 JS 还在读取对应 DOM 样式
打包后体积没变小？先检查这三件事
不是配了 content 就自动生效，构建流程卡点很多：
- 确认用的是生产模式：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify，开发模式下purge不触发 - Vite / Next.js / Remix 等框架有专属集成方式，别直接套通用配置。例如 Next.js 要确保
content在tailwind.config.js顶层，且./app/**/*.{js,ts,jsx,tsx}路径对得上 - 检查输出 CSS 是否真被压缩：用
grep -o "text-lg" dist/output.css | wc -l对比输入源里出现次数，明显少就是生效了；如果还有大量未用类，回头查content路径是否拼错、扩展名是否漏写
最常被忽略的是：本地开发时开 hot reload，CSS 是按需注入的，根本没走 purge 流程。体积数字只看生产构建产物，别信 dev server 控制台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
