使用 JIT 模式

Tailwind CSS 的 JIT（Just-In-Time）模式是一个强大的编译器，它能即时生成项目中实际使用到的 CSS 样式类，显著优化开发体验和最终的 CSS 文件大小。启用 JIT 模式后，Tailwind 不再生成完整的 CSS 文件，而是根据实际需要动态生成所使用的类。

什么是 JIT 模式？

JIT 模式是 Tailwind CSS 的一项功能，当你在项目中使用特定的样式类时，它会立即生成相应的 CSS。这样，未使用的样式不会包含在最终的 CSS 文件中，显著减少了文件大小。此外，JIT 模式在开发过程中极大地加快了编译速度，使得样式的应用变得更加高效和灵活。

JIT 模式的主要优势：

  1. 即时生成样式：只生成项目中实际使用到的样式类。
  2. 更小的文件体积：通过删除未使用的样式类，优化最终的 CSS 文件。
  3. 更快的开发体验：更高效的热更新和编译速度。
  4. 动态类支持：可以使用更复杂的动态类名。

启用 JIT 模式

启用 JIT 模式非常简单。你只需在 tailwind.config.js 配置文件中启用 jit 模式即可：

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

在上面的配置中：

mode: 'jit' 用于启用 JIT 模式。 purge 用于指定需要被扫描的文件，这样可以确保 Tailwind 只生成所使用的类。 运行 JIT 模式 在启用 JIT 模式后，通常你只需启动开发服务器或运行构建命令：

npm run dev

在开发环境中，每当你更改文件时，Tailwind 将即时生成新的样式类。所有未使用的类将不会包含在最终的 CSS 文件中，确保输出的 CSS 文件尽可能小。

动态类生成

JIT 模式的一个显著优势是支持动态类生成。在传统模式下，Tailwind 只能识别静态的类名，而在 JIT 模式下，类名可以动态生成。

例如，以下代码在 JIT 模式下是有效的：

<div class="text-{{ color }}-500"></div>

假设 color 是一个动态变量（例如 red 或 blue），JIT 模式会根据实际的值生成相应的类，例如 text-red-500 或 text-blue-500，并立即编译成 CSS。

优化构建文件大小

JIT 模式通过自动移除未使用的样式类，显著减少了最终的 CSS 文件大小。这对生产环境中的性能有很大帮助，特别是对于大型项目来说。为了确保最佳性能，在构建生产版本时需要正确配置 PurgeCSS 或 JIT 的 purge 选项。

示例配置：

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

这种配置方式将确保 Tailwind 在构建时扫描 ./src 目录下的所有 HTML 和 JS 文件，并生成项目中使用到的样式类。

提升开发体验

JIT 模式极大地改善了开发体验：

  • 即时反馈：在保存文件后，JIT 模式会立即生成新的样式类，几乎不需要等待。
  • 快速迭代：开发者可以立即看到所做的样式更改，而不必等待整个 CSS 文件重新编译。
  • 更好的支持动态类名：通过 JIT 模式，动态生成类名的方式变得更加灵活，这意味着开发者可以更自由地组合样式。

热重载支持

在开发过程中，JIT 模式结合热重载功能（HMR），使得你可以快速看到样式的变化而不必刷新页面。任何修改都会立即反映在页面上，极大提高了开发效率。

生产环境中的 JIT 模式

在生产环境中，JIT 模式确保生成的 CSS 文件尽可能小。你不再需要担心 Tailwind 生成大量未使用的 CSS 类。只要确保正确配置 purge 选项，最终生成的 CSS 文件将仅包含实际使用到的样式。

生产构建的命令通常如下：

npm run build

该命令会运行构建工具，生成优化后的 CSS 文件。

总结

Tailwind CSS 的 JIT 模式通过即时生成样式类、动态类名支持、快速开发体验和高效的文件优化，极大地提升了开发者的生产力。无论是在开发环境还是生产环境中，JIT 模式都能带来更小的文件体积和更快的样式应用，是现代前端开发的重要工具之一。

Last Updated::