Tailwind CSS v3构建更快的核心是JIT将“全量扫描+预生成”改为“按需扫描+实时生成”，仅解析content路径中静态出现的类名，省去I/O、正则匹配与字符串拼接开销；v2的AOT则硬编码输出约6000行工具类。
为什么v3的JIT构建更快，不是因为“CSS更少”
构建变快的核心不在输出体积，而在编译逻辑本身：JIT 把“全量扫描 + 预生成”改成了“按需扫描 + 实时生成”。v2 的 AOT 模式启动时就硬编码输出约 6000 行工具类（text-xs 到 text-9xl、所有断点下的 flex 变体），哪怕你只用了 text-lg 和 md:flex；而 JIT 在首次启动时只读取 content 路径下文件，提取出实际出现的类名字符串，再生成对应规则——省掉的是 I/O、正则匹配、字符串拼接这三块最耗时的环节。
如何确认当前用的是 JIT 而不是退化成 AOT
别看配置里有没有 mode: 'jit'——这个字段在 v3.0+ 已被移除，写了反而可能干扰。真正有效的判断依据只有三个：
-
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 数组。路径漏配、类型写错、通配过宽，都会导致它“看不见”你写的类：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
["./**/*.{js,ts}"]（漏了jsx、tsx，React 组件里的className全部失效） - 危险写法：
["./**/*"]（扫描node_modules和dist，I/O 拖垮构建，还可能误读压缩代码） - 正确写法：
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
漏配一个扩展名，就等于关掉一半 JIT 的眼睛；多扫一个无关目录，冷启时间可能翻倍。
@apply 和动态类名为什么在 JIT 下容易失效
JIT 基于静态 AST 分析，对运行时行为无感知：
-
@apply bg-blue-500 hover:bg-blue-600生效的前提，是bg-blue-500至少在某个模板中单独出现过；否则 JIT 不会生成其底层规则 -
className={`p-${padding}`}或class="text-${size}"这类拼接，JIT 解析不到具体值，直接跳过，样式丢失 - 解决办法：把依赖项加进
safelist，或改用theme('spacing.4')内联值绕过类名解析
最常被忽略的一点：JIT 的“按需”不是按你“想用”，而是按你“已写死”的字符串。它不猜、不推、不运行 JS，只忠实提取源码里白纸黑字的类名。
