Tailwind CSS v2.1

自 Tailwind CSS v2.0 以来的第一个新功能更新终于到来,并且包含了很多很酷的新特性!我们将新的 JIT 引擎合并到核心中,添加了一流的 CSS 滤镜支持,添加了混合模式工具类等等。

以下是一些亮点:

• 核心中的 JIT 引擎
• 可组合的 CSS 滤镜 API
• 新的混合模式工具类
• 新的隔离工具类

要了解完整详情,请查看 GitHub 上的发布说明。

核心中的 JIT 引擎

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

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

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

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

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

可组合的 CSS 滤镜 API

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

它们的工作方式很像我们的 transform 工具类，你使用 filter 来启用滤镜，并将其与 grayscale、blur-lg 或 saturate-200 等工具类组合，以动态组合滤镜。

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

...and here's what backdrop-filter looks like:

<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

If you were previously using @tailwindcss/jit, you can now switch back to tailwindcss and update your PostCSS configuration accordingly.

Ready to upgrade? Get it from npm →

This migration ensures the content adheres to the new v4 format, utilizing the components and codes specified for examples, excerpts, and code blocks.