Just-In-Time：下一代 Tailwind CSS

更新：从 Tailwind CSS v2.1 开始，新的 Just-in-Time 引擎已包含在 Tailwind CSS 本身中，因此您不再需要 @tailwindcss/jit 包。在文档中了解更多信息.

多年来，我们在改进 Tailwind CSS 时不得不处理的最难的约束之一是开发中的生成文件大小。如果对配置文件进行了足够的自定义，生成的 CSS 可能达到 10MB 或更多，而且构建工具甚至浏览器本身只能容忍一定量的 CSS。

出于这个原因，您始终需要谨慎对待对配置文件的昂贵更改，例如添加太多额外的断点或启用额外的变体，例如 disabled 或 focus-visible。

今天，我非常激动地分享一个我们一直在开发的新项目，它让这些考虑成为过去：Tailwind CSS 的 Just-in-Time 编译器.

@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 上了解更多关于该项目的信息，然后安装它，玩弄它，弯曲它，打破它，并告诉我们您的想法！