即时编译：下一代 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 完全相同。再也无需担心在生产环境中意外清除重要样式。
• 开发中更好的浏览器性能。由于开发构建的大小与生产构建相同，浏览器无需解析和处理多个 MB 的预生成 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 上了解更多该项目，然后安装它，玩弄它，弯曲它，打破它，并告诉我们您的想法！

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