Tailwind CSS v2.1

日期

自 Tailwind CSS v2.0 以来,第一个新的功能更新已经发布,其中包含许多很酷的东西!我们已经将新的 JIT 引擎合并到核心,添加了对可组合 CSS 过滤器的首选支持,添加了混合模式实用程序,以及更多其他内容。

以下是一些亮点

有关完整详细信息,请查看 GitHub 上的发布说明


核心中的 JIT 引擎

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

tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    // ...
  ],
  // ...
}

此功能仍处于预览阶段,这意味着一些细节可能会随着我们解决问题而改变,并且它不受语义版本控制的约束。

如果您之前使用的是 @tailwindcss/jit,现在可以迁移到 Tailwind CSS v2.1,因为所有关于引擎的新开发都将在那里进行。

阅读Just-in-Time 模式文档以了解更多信息。

可组合 CSS 过滤器 API

这是一个重大的更新——我们终于添加了对 CSS 滤镜的一流支持!

它们的工作方式与我们的 transform 实用程序非常相似,您使用 filter 启用滤镜,并将其与 grayscaleblur-lgsaturate-200 等实用程序结合使用,以动态组合滤镜。

以下是 filter 的外观

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

… 以下是 backdrop-filter 的外观

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

查看 滤镜背景滤镜 以了解更多信息。我们很快将在那里添加一些有用的视觉示例!

新的混合模式实用程序

我们添加了针对 mix-blend-modebackground-blend-mode 的全新实用程序

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

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

新的隔离实用程序

我们添加了新的 isolateisolation-auto 实用程序,用于处理 isolation 属性

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

这对于对混合模式功能或 z-index 调整进行范围限定非常有用,并且功能非常强大。查看 文档 以了解更多信息。

我还强烈推荐 Josh Comeau 的这篇很棒的文章,以了解它的实际应用。


升级

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

npm install tailwindcss@latest

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

准备升级?从 npm 获取 →