TailwindCSS 的 JIT 编译器是什么？它有哪些优势？

TailwindCSS v3.0 引入了 JIT（Just-In-Time）编译器，这是一个重大的性能改进，相比传统的 AOT（Ahead-Of-Time）编译方式有显著优势。

JIT 编译器的工作原理

JIT 编译器在开发过程中按需生成 CSS，而不是预先生成所有可能的样式组合。

核心机制

1. 扫描文件：JIT 编译器扫描项目中的所有模板文件（HTML、JS、Vue、React 等）
2. 提取类名：提取实际使用的 TailwindCSS 类名
3. 动态生成：只生成被使用的 CSS 规则
4. 实时更新：当类名变化时，自动更新生成的 CSS

JIT vs AOT 对比

AOT（旧版本）

• 预先生成所有可能的样式组合
• 文件体积大（通常 3MB+）
• 构建时间长
• 需要配置 PurgeCSS 来移除未使用的样式

JIT（v3.0+）

• 按需生成样式
• 文件体积小（通常只有几十 KB）
• 构建速度快
• 无需额外配置 PurgeCSS
• 支持任意值语法

JIT 的主要优势

1. 任意值语法

html
<!-- 可以直接使用任意值 -->
<div class="w-[137px] bg-[#1da1f2]">
  自定义样式
</div>

2. 变体堆叠

html
<!-- 可以堆叠多个变体 -->
<button class="hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50">
  按钮
</button>

3. 更快的构建速度

• 只处理实际使用的类名
• 减少了不必要的 CSS 生成
• 开发服务器启动更快

4. 更小的最终文件

• 只包含使用的样式
• 自动优化 CSS 输出
• 无需额外的清理步骤

配置 JIT 编译器

在 tailwind.config.js 中启用 JIT：

javascript
module.exports = {
  mode: 'jit',
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

JIT 的高级特性

1. 动态类名支持

javascript
// 可以使用模板字符串
const size = 'large';
<div class={`text-${size}`}>
  动态大小
</div>

2. 安全列表

javascript
module.exports = {
  safelist: [
    'bg-red-500',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-500/,
      variants: ['hover', 'focus'],
    },
  ],
}

3. 自定义变体

javascript
module.exports = {
  theme: {
    extend: {
      variants: {
        display: ['group-hover'],
      },
    },
  },
}

最佳实践

1. 使用 content 配置：明确指定要扫描的文件路径
2. 避免动态类名：尽量使用完整的类名而非动态拼接
3. 利用任意值语法：对于一次性使用的样式，使用任意值语法
4. 监控文件大小：定期检查生成的 CSS 文件大小

注意事项

• JIT 编译器需要 Node.js 12.13.0 或更高版本
• 某些旧版浏览器可能需要额外的 polyfill
• 在生产环境中确保正确配置 content 选项