tailwind css生产包体积大主因是content字段未配全或未走生产构建导致jit失效；必须精确覆盖所有含class文件路径（如next.js需同时包含app//与pages//）、为动态类名添加safelist正则兜底，并用tailwind_mode=build构建后通过grep验证裁剪效果。
Tailwind CSS 生产包体积大，90% 是因为 content 字段没配对、没配全，或者根本没走生产构建流程——JIT 模式压根没启动，结果输出的是接近全量的 CSS（常超 2MB），而不是你代码里真正用到的那几十 KB。
content 路径必须精确覆盖所有含 class 的文件
这是 JIT 生效的唯一开关。v3+ 已移除 purge 字段，只认 content；它不是“锦上添花”，是“生死线”。
-
content: ["src/**/*.{js,ts}"]→ 漏了.jsx和.tsx，React 组件里的className全被忽略 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，Vite/Next.js 可能直接跳过该路径，统一用src/**/*.{js,jsx,ts,tsx} - Next.js 项目只写
app/**/*却漏了pages/**/*→dark:、group-等上下文类大概率丢失 - 用了 MDX、EJS 或服务端模板（如
views/**/*.html.ejs）？不加进content，SSR 渲染出的 class 就不在扫描范围内
动态类名必须显式兜底，不能靠 JS 运行时推断
Tailwind 不执行 JS，只匹配源码中真实出现的字符串字面量。漏兜会导致上线后按钮没背景、文字无颜色、响应式断点失效。
-
className={`${isActive ? 'bg-blue-500' : 'bg-gray-200'}`能保留，前提是这两个字符串必须真实出现在某个被content扫到的文件里 -
text-${color}这种写法必然被删——除非color是固定字符串且已出现在源码中 - 优先改用
@apply封装成语义类（如.btn-primary），再把该 CSS 文件路径加入content - 必须用动态拼接时，在
tailwind.config.js的safelist中加正则：/^bg-(blue|gray)-[0-9]+$/，避免宽泛匹配/^bg-/ - 第三方组件库（如
react-datepicker）的 class 不在你源码中 → 加进safelist，别轻易往content里塞node_modules路径，体积易反弹
必须用生产构建验证，开发模式完全不可信
本地 npm run dev 正常 ≠ 生产正常。开发服务器是 JIT 实时生成，不依赖 content 扫描结果；而 npm run build 才真正触发裁剪逻辑。
- 强制走生产流程验证：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 检查是否真瘦身：
grep -o "text-lg" dist/output.css | wc -l对比源码中出现次数；若远少于源码频次，说明生效了 - 临时在某个
.tsx文件里加一行className="bg-hotpink text-9xl"（非法值），再构建：如果输出 CSS 里真出现了bg-hotpink，说明 JIT 已退化为全量模式 - Vite 用户可用
rollup-plugin-visualizer查看最终 CSS chunk 构成，确认tailwind.css是否稳定在 100KB 内
最容易被忽略的点是：本地开发时开 hot reload，CSS 是按需注入的，根本没走 purge —— 配置错了也看不出问题，直到上线才爆雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
