Tailwind CSS v3 构建更快的核心原因是默认启用 JIT 引擎，按需生成实际使用的 CSS 规则，而非预生成全部工具类；v2 的 AOT 模式会输出约 6000 行基础类，即使仅用少量。
为什么 tailwindcss@v3 的构建速度明显快于 v2
核心原因不是“CSS 更少”，而是 v3 默认启用的 JIT（Just-In-Time）引擎彻底改变了工作流：它不再预生成全部工具类，而是在扫描源文件时按需生成实际用到的 CSS 规则。v2 的 default 模式会一次性输出约 6,000 行基础工具类（哪怕你只用了 text-red-500 和 flex），而 JIT 只输出你真正写的那几条。
实操建议：
- 确认
tailwind.config.js中未手动关闭mode: 'jit'（v3.0+ 默认开启，但旧配置迁移时可能残留mode: 'aot'） - 确保
content配置项准确覆盖所有模板路径，例如：content: ['./src/**/*.{js,jsx,ts,tsx,html}']；漏配会导致 JIT 扫不到类名，渲染时缺失样式 - 避免在 JS 字符串拼接中动态构造类名（如
className={`text-${color}-500`}），JIT 默认不识别这种运行时组合，需显式在safelist中声明
jit 模式下 @apply 为什么有时不生效
因为 JIT 的“按需”逻辑基于静态 AST 分析，而 @apply 若引用了未被直接使用的工具类（比如只在 @layer components 里定义、但没在 HTML/JSX 中出现过），JIT 可能跳过生成其底层规则。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 自定义组件中写
@apply bg-blue-500 hover:bg-blue-600，但页面无背景色——检查是否在任何模板中单独用过bg-blue-500 - 使用
@layer utilities添加新工具类，却未在content路径下任何文件中显式调用，JIT 不会处理该层
解决办法：在 tailwind.config.js 的 safelist 中添加依赖项，或改用 theme() 函数内联值（如 background-color: theme('colors.blue.500')）绕过 JIT 类名解析。
开发服务器热更新变快，但首次启动反而更慢？
这是 JIT 的典型权衡：首次启动需完成两件事——解析全部 content 文件提取类名 + 构建 CSS AST 树；而 v2 的 AOT 模式是“一次生成，反复读取”。所以如果你项目有大量模板（如 2000+ 个 Markdown 文件），JIT 首次扫描确实更耗时。
可优化点：
- 收紧
contentglob 范围，避免扫描node_modules或构建产物目录 - 升级到
tailwindcss@3.4+，其引入了缓存哈希机制，后续启动会复用已解析的文件指纹 - 禁用不必要的插件（如
@tailwindcss/forms若未用表单组件），减少 AST 处理负担
生产环境 CSS 体积没变小？检查 purge 是否被覆盖
v2 的 purge 选项在 v3 中已由 content 全面接管，但若配置中仍保留 purge: [...] 字段，Tailwind 会静默忽略它，并回退到不安全的全量模式（即生成所有变体），导致 CSS 体积暴涨。
务必确认：
-
tailwind.config.js中没有purge字段（v3 已废弃） -
content是数组且至少含一个有效 glob（空数组或字符串会导致 JIT 停摆） - CI 环境中执行
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/css/output.css，避免开发模式缓存干扰
JIT 的性能收益高度依赖配置的“诚实性”——它信任你提供的 content 路径就是全部来源，多扫或漏扫都会打破预期。这点容易被忽略，但恰恰是上线后样式丢失或包体积失控的根源。
