Tailwind CSS v3.2 带来了大量的新内容,包括对动态断点的支持、单个项目中的多个配置文件、容器查询等等。
一个项目中使用多个配置文件
添加了一个新的 @config
指令,开发者可以在 CSS 文件中使用该指令来指定用于该文件的 Tailwind CSS 配置:
@config "./tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;
这使得在具有单独 Tailwind 配置的单个项目中构建多个样式表变得更加容易。例如,你可能有一个配置文件用于站点面向客户的部分,而另一个配置用于管理/后端区域。
新的 @config
指令更加简单易用,即使在你对构建工具配置没有太多控制的项目中也是如此。
基于浏览器的样式支持
现在可以根据用户浏览器是否支持某个功能来有条件地设置样式 supports-[...]
变体,生成 [@supports rules](<https://developer.mozilla.org/en-US/docs/Web/CSS/@supports>)
<div class="flex supports-[display:grid]:grid ...">
<!-- ... -->
</div>
supports-[...]
变体在方括号之间接受你在@supports (...)
中使用的任何东西,例如属性/值对,甚至使用表达式 and
和 or
.
ARIA 属性变体
现在可以使用新的 aria-*
变体,基于 ARIA 属性有条件地设置样式。例如,您可以根据 aria-checked
状态是否是 true
来更新元素的背景颜色:
<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">
<!-- ... -->
</span>
数据属性变体
现在可以使用新 data-*
变体,基于 Date 属性有条件地设置样式。
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Generated CSS -->
<style>
.data-\\[size\\=large\\]\\:p-8[data-size="large"] {
padding: 2rem;
}
</style>
最大宽度和动态断点
添加了一个新的 max-*
变体,允许根据配置的断点应用最大宽度媒体查询:
<div class="max-lg:p-8">
<!-- Will apply `p-8` until the `lg` breakpoint kicks in -->
</div>
作为一般规则,仍然建议个人使用 min-width 断点,但此功能确实带来了一个有用的工作流程优势,即不必在不同的断点撤消某些样式。
动态 group-* 和 peer-* 变体
现在可以通过将自己的选择器传递到方括号之间,来创建自定义 group-*
和 peer-*
变体,
<div class="group is-published">
<div class="hidden group-[.is-published]:block">
Published
</div>
</div>
容器查询
已实现容器查询(container queries),Tailwind CSS 发布了一个新的第一方插件 @tailwindcss/container-queries
,它为框架添加了容器查询支持,使用新的 @
语法将它们与普通媒体查询区分开来:
<div class="@container">
<div class="block @lg:flex">
<!-- ... -->
</div>
</div>
更多详情可查看:https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0