JIT 模式通过按需生成 CSS 显著减小文件体积（如从 1.8MB 降至 12KB），从而加快浏览器下载、解析和渲染速度；其效果高度依赖 content 配置准确性，错误配置会导致退化为全量生成。
Tailwind CSS JIT 模式本身不直接影响浏览器“加载速度”，它影响的是构建产物体积和开发时热更新响应——真正让页面加载变快的，是最终生成的 CSS 文件更小、解析更快。
为什么 JIT 生成的 CSS 更小
JIT 不预生成所有可能的工具类，只扫描 content 路径下静态出现的类名，然后生成对应规则。比如你只写了 text-lg 和 md:flex，JIT 就只输出这两条规则；而旧版 AOT 模式会把 text-xs 到 text-9xl、全部断点下的 flex 变体全写进 CSS，体积常超 2MB。
- 典型项目开启 JIT 后，CSS 文件从 1.8MB 降到 12KB 左右
- 浏览器下载、解析、应用样式的时间直接下降一个数量级
- 没有冗余规则，也减少了 CSSOM 构建开销
content 配置错误会导致 JIT 失效
如果 content 数组路径写错、漏了扩展名或包含太多无关文件，JIT 就无法提取到你写的类名，结果退化为全量生成——体积暴涨，加载反而更慢。
- 错误写法：
["./**/*.{js,ts}"]（漏了jsx、tsx，React 组件里的className全部失效） - 危险写法：
["./**/*"]（扫描node_modules和dist，I/O 拖垮构建，还可能误读压缩代码） - 正确写法：
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
动态类名拼接不会被 JIT 捕获
JIT 基于静态 AST 分析，对运行时拼接的类名无能为力。像 className={`p-${padding}`} 或 class="text-${size}" 这类写法，JIT 看不到具体值，就不会生成对应规则，最终样式丢失。
- 后果：页面渲染时缺少预期样式，且无报错提示
- 替代方案：用
safelist显式声明可能的组合，例如['p-2', 'p-4', 'p-6'] - 更稳妥做法：改用
@apply封装在组件内部，或用theme()函数内联值绕过类名解析
JIT 不改变浏览器运行时行为，只改变构建输出
JIT 是构建时机制，不是运行时编译器。它不会在浏览器里动态生成 CSS，也不会做任何运行时注入。所谓“实时”，仅指你在编辑器里保存文件后，构建工具（如 Vite、Next.js）触发 PostCSS 插件重新扫描 + 增量更新 CSS 输出，整个过程耗时通常在毫秒级。
- 首次启动较慢？正常——它要完整扫描所有
content文件并构建初始 AST - 热更新卡顿？先检查
content是否包含大量 Markdown、JSON 或构建产物目录 - 想验证是否生效？打开浏览器 Network 面板，看 CSS 响应头有没有
X-Tailwind-JIT: true，或直接搜 output.css 里有没有大量未使用的hover:scale-105类
最容易被忽略的一点：JIT 的效果完全依赖 content 配置的准确性。路径差一位、扩展名少个 x、漏掉 .svelte 或 .vue，它就“看不见”你写的类——不是 JIT 慢，是它根本没干活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
