更新：从 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 项目中由于 webpack 处理大型 CSS 文件很困难，可能需要 30-45 秒。无论您使用什么构建工具，这个库都可以在约 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.jsmodule.exports = { plugins: { "@tailwindcss/jit": {}, autoprefixer: {}, },};我们目前将其作为一个单独的库发布，但一旦我们解决了所有问题，我们将把它重新集成到 tailwindcss 中，并在今年晚些时候的 Tailwind CSS v3.0 中将其作为默认配置选项。
在 GitHub 上了解更多关于该项目的信息，然后安装它，试用它，弯曲它，打破它，并告诉我们您的想法！
准备好试试了吗？开始 →