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,因为所有关于引擎的新开发都将在那里进行。
阅读Just-in-Time 模式文档以了解更多信息。
可组合 CSS 过滤器 API
这是一个重大的更新——我们终于添加了对 CSS 滤镜的一流支持!
它们的工作方式与我们的 transform
实用程序非常相似,您使用 filter
启用滤镜,并将其与 grayscale
、blur-lg
或 saturate-200
等实用程序结合使用,以动态组合滤镜。
以下是 filter
的外观
<div class="filter blur-md grayscale invert ...">
<!-- ... -->
</div>
… 以下是 backdrop-filter
的外观
<div class="backdrop-filter backdrop-blur backdrop-brightness-50 ...">
<!-- ... -->
</div>
查看 滤镜 和 背景滤镜 以了解更多信息。我们很快将在那里添加一些有用的视觉示例!
新的混合模式实用程序
我们添加了针对 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 获取 →