2021 年 4 月 5 日

Tailwind CSS v2.1

Adam Wathan

自 Tailwind CSS v2.0 以来的首次新功能更新已发布，并加载了许多很酷的东西！我们已将新的 JIT 引擎合并到核心，添加了对可组合 CSS 滤镜的一流支持，添加了混合模式实用程序以及更多功能。

以下是一些亮点

有关完整详细信息，请查看 GitHub 上的发行说明。

核心中的 JIT 引擎

我们在 3 月份宣布的全新 JIT 引擎现已合并到核心中，并且可以通过在您的 tailwind.config.js 文件中使用新的 mode 选项作为选择加入功能使用

module.exports = {
  mode: "jit",
  purge: [
    // ...
  ],
  // ...
};

此功能仍处于预览状态，这意味着某些细节可能会在我们解决问题时发生变化，并且不受语义版本控制的约束。

如果您之前使用的是 @tailwindcss/jit，您现在可以迁移到 Tailwind CSS v2.1，因为这是引擎所有新开发将发生的地方。

阅读即时模式文档以了解更多信息。

这是一个巨大的进步 - 我们终于添加了对 CSS 滤镜的一流支持！

它们的工作方式很像我们的 transform 实用程序，您可以使用 filter 启用滤镜，并将其与 grayscale、blur-lg 或 saturate-200 等实用程序结合使用，以动态组合滤镜。

<div class="blur-md grayscale invert filter ...">
  <!-- ... -->
</div>

...这是 backdrop-filter 的外观

<div class="backdrop-blur backdrop-brightness-50 backdrop-filter ...">
  <!-- ... -->
</div>

查看 filter 和 backdrop-filter 以了解更多信息。我们很快将在那里添加一些有用的视觉示例！

我们为 mix-blend-mode 和 background-blend-mode 添加了全新的实用程序

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

查看文档以了解更多信息。

我们添加了新的 isolate 和 isolation-auto 实用程序，用于处理 isolation 属性

<div class="isolate ...">
  <!-- ... -->
</div>

这对于限定混合模式功能或 z-index 调整非常有用，并且非常强大。

查看文档以了解更多信息。

我还强烈推荐Josh Comeau 的这篇精彩文章，以了解它的实际应用。

Tailwind CSS v2.1 是一次增量升级，没有重大更改，因此要升级，您只需运行

npm install tailwindcss@latest

如果您之前使用的是 @tailwindcss/jit，您现在可以切换回 tailwindcss 并相应地更新您的 PostCSS 配置。

准备好升级了吗？从 npm 获取 →

此迁移确保内容符合新的 v4 格式，利用为示例、摘录和代码块指定的组件和代码。