TailwindCSS JIT 模式是什么？任意值语法和按需生成原理

JIT（Just-In-Time）模式是 TailwindCSS v3 的默认引擎——按需生成 class，而不是预生成所有可能的组合。这让产物体积从 MB 级降到 KB 级，同时支持任意值语法。

JIT 之前：AOT 模式

TailwindCSS v2 及以前用 AOT（Ahead-Of-Time）模式：构建时生成所有 class 组合（所有颜色 x 所有尺寸 x 所有断点），产物可能 3-5MB。然后通过 purge 删除未使用的 class。

问题：不支持任意值（text-[13px] 这种写法不工作），构建慢，purge 配置容易出错。

JIT 模式的工作原理

JIT 不预生成所有 class，而是扫描源码中实际使用的 class，只生成这些。你写了 text-red-500 就生成，没写就不生成。

结果：

• 开发时 CSS 只有几 KB（而不是几 MB），浏览器加载快
• 支持任意值：text-[13px]、grid-cols-[17]、top-[calc(100%-1rem)]
• 不需要 purge 步骤（JIT 本身就是按需生成）

任意值语法

方括号 [] 里写任意 CSS 值：

html
<div class="text-[13px] mt-[27px] bg-[#1da1f2]">
<div class="grid-cols-[1fr_2fr_1fr]">
<div class="top-[calc(100%-1rem)]">

任意值是 JIT 的杀手锏——不再被预定义的断点/颜色/间距限制。但不要滥用：如果一个值在多处使用，应该加到 @theme 配置里（如 --spacing-18: 4.5rem），而不是到处写方括号。

JIT 的局限

• 动态拼接的 class 无法被检测（const color = 'bg-' + variant）
• 某些复杂表达式在方括号里可能解析失败（包含 _ 和空格的值需要特殊转义）
• 构建时需要扫描所有模板文件（大项目可能稍慢）

v4 的改进

v4 的 Oxide 引擎进一步优化了 JIT——用 Rust 重写扫描和生成逻辑，构建速度提升 10 倍。同时改进了任意值解析，支持更多 CSS 函数和表达式。