Tailwind CSS v3.2 发布，支持动态断点、多配置和容器查询

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 断点，但此功能确实带来了一个有用的工作流程优势，即不必在不同的断点撤消某些样式。

扫描二维码关注公众号，回复： 14538717 查看本文章

动态 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>