tailwind css生产环境打包体积过大，根本原因是content字段路径配置错误或缺失导致jit失效，从而全量输出css；需确保路径覆盖所有源码文件（含.tsx、.html等）、避免./前缀、用safelist处理动态类，并通过生产构建验证扫描是否生效。
因为 tailwind.config.js 不只是“配置开关”，而是直接决定哪些类会被生成、哪些值能被使用、哪些文件参与 JIT 编译——它控制着整个 Tailwind 样式系统的边界和行为逻辑。
content 字段写错路径，JIT 模式就失效
Tailwind 的 JIT 编译器只扫描 content 字段里明确列出的文件。如果路径漏写 .tsx、写成 ./src/*.{js,ts}（没包含 jsx 或 html），或者用了错误 glob 语法（比如 **/*.vue 却没装 Vue 插件），结果就是：你写了 bg-brand-blue，但最终 CSS 里根本没有这个类。
- 推荐写法：
content: ["./src/**/*.{js,jsx,ts,tsx,html}"] - Next.js 项目要额外加
./app/**/*.{js,jsx,ts,tsx} - 路径不支持正则或变量，必须是静态字符串数组
theme.extend 里覆盖颜色/间距，但 class 名不生效
很多人往 theme.extend.colors 里加了 'primary': '#3b82f6'，却在 HTML 里写 text-primary 报错——这是因为 Tailwind 默认只生成 text-[color] 形式的类，而 primary 是自定义键名，它不会自动映射到所有变体（text-、bg-、border- 等）。
- 正确做法：要么用完整路径
text-primary-500（前提是你在colors.primary下定义了500层级） - 要么用
theme.extend.textColor单独扩展文本色系 - 间距同理：
spacing扩展后，mt-72有效，但gap-72需要额外在theme.extend.spacing里声明或启用corePlugins: { gap: true }
plugins 数组顺序影响样式优先级
plugins 不是插件集合，而是按顺序注入 CSS 规则的执行栈。比如你同时用了 @tailwindcss/forms 和自定义插件，且两者都定义了 input[type="text"] 的样式，那么后注册的插件规则会覆盖前面的。
- 官方插件建议放前面，如
@tailwindcss/typography - 自己写的插件如果依赖某些基础工具类（比如想基于
ring做增强），就得确保它在ring相关插件之后 - 禁用默认插件要用
corePlugins: { preflight: false }，而不是从plugins数组里删掉
真正容易被忽略的不是怎么写配置，而是每次改完 tailwind.config.js 后，是否清除了构建缓存并重启 dev server——JIT 编译器会缓存扫描结果，旧缓存可能导致新配置不生效，连 tailwind build -c tailwind.config.js 都可能读错状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
