即时编译：Tailwind CSS 的下一代

更新：从 Tailwind CSS v2.1 开始，全新的即时编译（Just-in-Time）引擎已直接包含在 Tailwind CSS 中，因此你不再需要 @tailwindcss/jit 包。在文档中了解更多信息.

多年来，我们在改进 Tailwind CSS 的过程中遇到的最棘手的限制之一是开发过程中生成的文件大小。如果对配置文件进行足够多的自定义，生成的 CSS 大小可能会达到 10MB 甚至更大，而构建工具甚至浏览器本身所能承受的 CSS 大小是有限的。

🌐 One of the hardest constraints we've had to deal with as we've improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there's only so much CSS that build tools and even the browser itself will comfortably tolerate.

因此，你一直都必须小心对配置文件进行昂贵的更改，比如添加过多的额外断点或启用像 disabled 或 focus-visible 这样的额外变体。

🌐 For that reason, you've always had to be careful about expensive changes to your config file like adding too many extra breakpoints or enabling extra variants like disabled or focus-visible.

今天我非常兴奋地分享我们一直在开发的新项目，它让这些考虑成为过去： Tailwind CSS 的即时编译器。

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

这有很多优点：

🌐 This comes with a lot of advantages:

极快的构建速度。使用我们的 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 配置中：

🌐 Try it today by installing @tailwindcss/jit and swapping it into your PostCSS configuration:

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

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

我们目前将其作为一个独立的库进行发布，但一旦我们解决了所有问题，我们将把它重新整合到 tailwindcss 中，并使用一个配置选项来控制，同时我们计划在今年晚些时候的 Tailwind CSS v3.0 中将其设为默认。

🌐 We're shipping it as a separate library for now, but once we've worked out all the kinks we're going to roll it right back into tailwindcss behind a configuration option, and we're aiming to make it the default in Tailwind CSS v3.0 later this year.

在 GitHub 上了解更多关于该项目的信息，然后安装它，尝试使用它，随意玩弄它、毁坏它，并告诉我们你的想法！