Tailwind CSS 的 JIT 模式是什么，如何使用任意值和优化性能？

Tailwind CSS 的 JIT（Just-In-Time）模式是 v3.0 引入的新特性，按需生成 CSS，显著提高性能。

JIT 模式的优势：

• 按需生成：只生成实际使用的类
• 更小的文件体积：减少最终 CSS 大小
• 更快的构建速度：只处理使用的类
• 支持任意值：可以使用任意 CSS 值
• 更好的开发体验：实时生成样式

启用 JIT 模式：

• Tailwind CSS v3.0+ 默认启用 JIT 模式
• 在 tailwind.config.js 中配置：

  javascript
  module.exports = {
    mode: 'jit', // v3.0+ 默认启用
    content: ["./src/**/*.{html,js}"],
  }

使用任意值：

• 方括号语法：使用任意 CSS 值
• 示例：

  html
  <div class="w-[123px]">自定义宽度</div>
  <div class="h-[50%]">自定义高度</div>
  <div class="bg-[#1da1f2]">自定义颜色</div>
  <div class="p-[10px]">自定义内边距</div>
  <div class="text-[20px]">自定义字体大小</div>
  <div class="grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">自定义网格</div>

JIT 模式配置：

• content 配置：指定要扫描的文件
• 示例：

  javascript
  module.exports = {
    content: [
      "./src/**/*.{html,js,jsx,ts,tsx,vue}",
      "./public/**/*.html",
    ],
  }

• safelist 配置：防止某些类被清除
• 示例：

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

JIT 模式与 AOT 模式对比：

• JIT（Just-In-Time）：按需生成
  • 优点：文件小、构建快、支持任意值
  • 缺点：需要配置 content 路径
• AOT（Ahead-Of-Time）：预先生成所有类
  • 优点：无需配置、简单
  • 缺点：文件大、构建慢

性能优化：

• 合理配置 content 路径，避免扫描不必要的文件
• 使用 safelist 保护动态生成的类
• 利用任意值减少自定义 CSS
• 定期清理未使用的样式

开发体验：

• 实时生成：修改 HTML 后立即生成样式
• 热重载：支持开发服务器热重载
• 错误提示：提供清晰的错误信息

构建配置：

• Webpack：

  javascript
  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
      ],
    },
  }

• Vite：

  javascript
  // vite.config.js
  export default {
    css: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

最佳实践：

• 确保所有使用的类都在 content 路径中
• 使用任意值减少自定义 CSS
• 定期审查和优化配置
• 测试构建输出的大小
• 利用 JIT 模式的优势提高开发效率