Tailwind CSS v2.1

Adam Wathan

自 Tailwind CSS v2.0 以来的首个新功能更新现已发布,并包含许多酷炫的功能!我们将新的 JIT 引擎合并到核心中,添加了对可组合 CSS 滤镜的一级支持,添加了混合模式工具等等。

🌐 The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! We've merged the new JIT engine to core, added first-class support for composable CSS filters, added blending mode utilities, and a bunch more.

以下是一些亮点:

🌐 Here are some of the highlights:

有关完整详情,请在 GitHub 上查看发行说明。


核心中的 JIT 引擎(JIT engine in core)

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

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

此功能仍处于预览阶段,这意味着在我们解决一些问题的过程中,某些细节可能会发生变化,并且它不遵循语义化版本控制。

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

🌐 If you were using @tailwindcss/jit before, you can now migrate to Tailwind CSS v2.1 instead, as that's where all new development on the engine will happen.

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

可组合 CSS 滤镜 API(Composable CSS filters API)

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

🌐 This is a huge one — we've finally added first-class support for CSS filters!

它们的工作方式很像我们的 transform 工具,你可以使用 filter 来启用过滤器,并结合像 grayscaleblur-lgsaturate-200 这样的工具即时组合过滤器。

🌐 They work a lot like our transform utilities, where you use filter to enable filters, and combine it with utilities like grayscale, blur-lg, or saturate-200 to compose filters on the fly.

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

...这是 backdrop-filter 的样子:

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

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

新的混合模式工具(New blending mode utilities)

我们为 mix-blend-modebackground-blend-mode 添加了全新的实用工具:

🌐 We've added brand new utilities for mix-blend-mode and background-blend-mode:

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

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

新的隔离工具(New isolation utilities)

我们新增了用于处理 isolation 属性的 isolateisolation-auto 工具:

🌐 We've added new isolate and isolation-auto utilities for working with the isolation property:

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

这对于确定混合模式功能或 z-index 调整的范围非常有用,并且非常强大。

🌐 This can be really helpful for scoping blending mode features or z-index adjustments and is super powerful.

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

我也强烈推荐 Josh Comeau 的这篇精彩文章来看看实际效果。


升级(Upgrading)

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

🌐 Tailwind CSS v2.1 is an incremental upgrade with no breaking changes, so to upgrade you just need to run:

npm install tailwindcss@latest

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

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

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

此迁移确保内容遵循新的 v4 格式,并使用示例、摘录和代码块中指定的组件和代码。

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

TailwindCSS 中文网 - 粤ICP备13048890号