即时发布：下一代 Tailwind CSS

更新：从 Tailwind CSS v2.1 开始，新的 Just-in-Time 引擎已包含在 Tailwind CSS 本身中，因此你不再需要 @tailwindcss/jit 套件。Learn more in the documentation。

¥Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is included right in Tailwind CSS itself, so you don't need the @tailwindcss/jit package anymore. Learn more in the documentation.

多年来，我们在改进 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.

今天，我非常高兴地与大家分享我们一直在努力的一个新项目，它使这些考虑成为过去：a just-in-time compiler for Tailwind CSS。

¥Today I'm super excited to share a new project we've been working on that makes these considerations a thing of the past: a just-in-time compiler for Tailwind CSS.

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

¥@tailwindcss/jit is a new experimental library that compiles all of your CSS on-demand as you author your template files, instead of generating your entire stylesheet up front.

这有很多优点：

¥This comes with a lot of advantages:

• 闪电般的构建速度。使用我们的 CLI，Tailwind 的初始编译可能需要 3-8 秒，而在 webpack 项目中则需要 30-45 秒以上，因为 webpack 难以处理大型 CSS 文件。无论你使用哪种构建工具，这个库都能在大约 800 毫秒内编译最大的项目（增量重建最快仅需 3 毫秒）。

  ¥Lightning fast build times. Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files. This library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you're using.

• 每个变体都是开箱即用的。由于文件大小方面的考虑，focus-visible、active、disabled 等变体通常默认不启用。由于此库按需生成样式，因此你可以随时使用任何你想要的变体。你甚至可以像 sm:hover:active:disabled:opacity-75 一样将它们堆叠起来。无需再配置变体。

  ¥Every variant is enabled out of the box. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.

• 无需编写自定义 CSS 即可生成任意样式。你是否曾经需要一些不属于你的设计系统的极其具体的值，例如用于奇特背景图片的 top: -113px？由于样式是按需生成的，因此你可以根据需要使用方括号表示法（例如 top-[-113px]）为其生成一个实用程序。也适用于变体，例如 md:top-[-113px]。

  ¥Generate arbitrary styles without writing custom CSS. Ever needed some ultra-specific value that wasn't part of your design system, like top: -113px for a quirky background image? Since styles are generated on demand, you can just generate a utility for this as needed using square bracket notation like top-[-113px]. Works with variants too, like md:top-[-113px].

• 你的 CSS 在开发和生产阶段完全相同。由于样式是按需生成的，因此你无需在生产环境中清除未使用的样式，这意味着你在所有环境中都能看到完全相同的 CSS。再也不用担心在生产环境中意外清除重要的样式。

  ¥Your CSS is identical in development and production. Since styles are generated as they are needed, you don't need to purge unused styles for production, which means you see the exact same CSS in all environments. Never worry about accidentally purging an important style in production again.

• 正在开发中，浏览器性能更佳。由于开发版本与生产版本一样小，因此浏览器无需解析和管理数兆字节的预生成 CSS。在配置高度扩展的项目中，这可以使开发工具的响应速度更快。

  ¥Better browser performance in development. Since development builds are as small as production builds, the browser doesn't have to parse and manage multiple megabytes of pre-generated CSS. In projects with heavily extended configurations this makes dev tools a lot more responsive.

立即安装 @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.js
module.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.

Learn more about the project on GitHub，然后安装它，试用它，调整它，拆解它，并告诉我们你的想法！

¥Learn more about the project on GitHub, then install it, play with it, bend it, break it, and let us know what you think!

准备好尝试一下了吗？Get started →

¥Ready to try it out? Get started →