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
