Tailwind CSS v3 构建变快是因为 JIT 引擎改为按需扫描+实时生成，只编译实际使用的类；传统 AOT 模式全量生成约6000行工具类，而 JIT 仅解析 content 路径中静态出现的类名，显著减少 I/O 和字符串匹配开销。
Tailwind CSS v3 打包变快，不是因为“CSS 更少”，而是 JIT 引擎把编译逻辑从“全量预生成”改成了“按需扫描+实时生成”——它只处理你真正在 className 里写出来的类，其他一概不碰。
为什么 JIT 模式能让构建快起来
传统 v2 的 AOT（Ahead-of-Time）模式会一次性输出约 6000 行工具类，哪怕你只用了 text-red-500 和 flex；JIT 则在启动时扫描 content 路径下的文件，提取所有静态出现的类名，仅生成对应规则。这省掉了大量无效 CSS 的解析、拼接与写入开销。
- 构建耗时主要压在 I/O 和字符串匹配上，而非 CSS 生成本身
- 热更新时，JIT 只需重扫变更文件 + 增量合并 AST，无需重建全部样式表
- v3.4+ 加入了文件指纹缓存，后续启动跳过已解析内容，进一步压缩冷启时间
如何确认 JIT 真正在工作
别信配置里有没有 mode: 'jit' —— 这个字段在 v3 中已被移除，写了反而可能干扰。真正判断依据只有三个：
- 运行
npx tailwindcss -v输出是v3.x.x（如v3.4.3） -
package.json中"tailwindcss"版本 ≥3.0.0，且没装@tailwindcss/jit -
postcss.config.js里插件是require('tailwindcss')，不是require('@tailwindcss/jit')
如果构建后 CSS 文件里还大量存在 first-letter:text-xl、bg-gradient-to-r 这类冷门类，说明 JIT 没扫到使用处，大概率是 content 配置失效。
立即学习“前端免费学习笔记（深入）”；
content 配置写错 = JIT 失明
JIT 不再识别 purge 字段，只认 content 数组。路径漏配、类型写错、通配过宽，都会导致它“看不见”你写的类，最终退化为全量生成（体积常超 2MB）。
-
content必须是数组，不能是字符串或对象；空数组或注释掉等于没配 - 路径要覆盖所有 class 出现场所：比如 React 项目得写
['./src/**/*.{js,jsx,ts,tsx}']，Vue 项目补上.vue，HTML 入口别忘了./public/index.html - 避免
./**/*.js这种宽泛写法——扫描 2000+ 个无关文件，I/O 直接拖垮 JIT - 动态拼接类名（如
className={`text-${color}-500`}）不会被静态分析到，需进safelist或改用@apply封装
首次启动慢？不是 JIT 慢，是它在认真干活
JIT 首次启动确实比 v2 慢，因为它要完成两件事：完整扫描所有 content 文件提取类名 + 构建初始 CSS AST 树。这不是缺陷，是必要代价。
- 如果你的
content包含 1500 个 Markdown 文件，那它就得读完 1500 个文件——优化方向是收紧路径，而不是关 JIT - 确保
NODE_ENV=development或显式设TAILWIND_MODE=watch，否则 JIT 不启用监听，每次保存都触发全量重编译 - Vite 用户注意：
css.preprocess若被禁用，可能切断依赖追踪链，导致热更新失效
真正容易被忽略的是：JIT 的“按需”完全依赖静态文本分析，它看不到 eval()、dangerouslySetInnerHTML 里的类，也解析不了带变量的模板字符串——这些地方必须手动兜底，否则样式就丢了。
