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

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