即时编译 (Just-In-Time)：Tailwind CSS 的下一代

更新：从 Tailwind CSS v2.1 版本开始，新的即时编译引擎已直接包含在 Tailwind CSS 中，因此您不再需要 @tailwindcss/jit 包。 在文档中了解更多。

多年来，在改进 Tailwind CSS 的过程中，我们不得不处理的最困难的限制之一是在开发过程中生成的文件大小。 如果对配置文件进行足够的自定义，生成的 CSS 可能会达到 10mb 甚至更大，而构建工具甚至浏览器本身能够舒适地容忍的 CSS 量是有限的。

因此，您一直需要小心对配置文件进行昂贵的更改，例如添加过多的额外断点或启用额外的变体，如 disabled 或 focus-visible。

今天，我非常激动地分享一个我们一直在进行的新项目，这个项目使这些考虑成为过去：Tailwind CSS 的即时编译器。

@tailwindcss/jit 是一个新的实验性库，它会在您编写模板文件时按需编译您的所有 CSS，而不是预先生成整个样式表。

这带来了很多优势

• 闪电般的构建速度。 使用我们的 CLI，Tailwind 最初编译可能需要 3-8 秒，而在 webpack 项目中则需要 30-45 秒以上，因为 webpack 在处理大型 CSS 文件时会遇到困难。 无论您使用什么构建工具，这个库都可以在大约 800 毫秒内编译即使是最大的项目（增量重建速度快至 3 毫秒）。
• 开箱即用地启用所有变体。 由于文件大小的考虑，通常默认不启用 focus-visible、active、disabled 等变体。 由于此库按需生成样式，因此您可以随时随地使用任何您想要的变体。 您甚至可以像 sm:hover:active:disabled:opacity-75 这样堆叠它们。 再也不用配置您的变体了。
• 无需编写自定义 CSS 即可生成任意样式。 是否曾经需要一些不属于您的设计系统的超特定值，例如用于怪异背景图像的 top: -113px？ 由于样式是按需生成的，因此您可以使用方括号表示法（如 top-[-113px]）根据需要为此生成一个实用程序。 也适用于变体，例如 md:top-[-113px]。
• 您的 CSS 在开发环境和生产环境中是相同的。 由于样式是按需生成的，因此您无需为生产环境清除未使用的样式，这意味着您在所有环境中看到的 CSS 完全相同。 再也不用担心在生产环境中意外清除重要的样式了。
• 在开发环境中获得更好的浏览器性能。 由于开发构建版本与生产构建版本一样小，因此浏览器不必解析和管理多兆字节的预生成 CSS。 在配置高度扩展的项目中，这使得开发工具的响应速度更快。

立即尝试，安装 @tailwindcss/jit 并将其替换到您的 PostCSS 配置中

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  },
};

目前我们将其作为一个单独的库发布，但一旦我们解决了所有问题，我们就会将其作为一个配置选项直接合并回 tailwindcss 中，我们的目标是使其在今年晚些时候的 Tailwind CSS v3.0 中成为默认设置。

在 GitHub 上了解更多关于该项目的信息，然后安装它，玩玩它，弯曲它，破坏它，并告诉我们您的想法！

准备好尝试了吗？ 开始使用 →