Tailwind CSS v3.2：动态断点、多配置和容器查询，我的天！

Tailwind CSS v3.2 发布了，带来了大量新内容，包括对动态断点、单个项目中的多个配置文件、嵌套组、参数化变体、容器查询等的支持。

像往常一样，查看发行说明了解每个细枝末节的修复和改进，但这里是亮点集锦

• 在一个项目中使用多个配置文件，使用 @config

• 基于浏览器支持的样式，使用 supports-*
• ARIA 属性变体
• Data 属性变体
• 最大宽度和动态断点
• 动态 group-* 和 peer-* 变体
• 使用 matchVariant 的动态变体

• 使用变体修饰符的嵌套 group 和多个 peer 支持

• 容器查询

通过从 npm 安装最新版本的 tailwindcss 来升级您的项目

npm install -D tailwindcss@latest

或者在 Tailwind Play 中体验新功能，您可以在浏览器中立即试用所有功能。

在一个项目中使用多个配置文件，使用 @config

我们添加了一个新的 @config 指令，您可以在 CSS 文件中使用它来指定该文件要使用的 Tailwind CSS 配置

@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

这使得在单个项目中构建具有单独 Tailwind 配置的多个样式表变得更加容易。例如，您可能有一个配置文件用于站点的面向客户部分，另一个配置文件用于管理/后端区域。

从技术上讲，您一直可以使用足够的 webpack 技巧来做到这一点，但新的 @config 指令使其超级简单且每个人都可以访问，即使在您对构建工具配置没有太多控制的项目中也是如此。

基于浏览器支持的样式，使用 supports-*

您现在可以使用 supports-[...] 变体根据用户的浏览器是否支持特定功能来有条件地设置样式，该变体会生成底层的 @supports 规则。

<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>

supports-[...] 变体接受您在方括号之间与 @supports (...) 一起使用的任何内容，例如属性/值对，甚至使用 and 和 or 的表达式。

如果您只需要检查是否支持属性本身，您甚至可以只指定属性名称，Tailwind 会为您填写空白

<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
  <!-- ... -->
</div>

ARIA 属性变体

您现在可以使用新的 aria-* 变体根据 ARIA 属性有条件地设置样式。

例如，您可以根据 aria-checked 状态是否为 true 来更新元素的背景颜色

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">
  <!-- ... -->
</span>

默认情况下，我们包含了最常见的布尔 ARIA 属性的修饰符

您可以通过编辑 tailwind.config.js 文件中的 theme.aria 或 theme.extend.aria 来自定义哪些 aria-* 修饰符可用

module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

如果您需要使用一个不适合包含在主题中的一次性 aria 修饰符，或者对于需要特定值的更复杂的 ARIA 属性，请使用方括号来动态生成任何任意值的属性。

<table>
  <thead>
    <tr>
      <th
        aria-sort="ascending"
        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
      >
        Invoice #
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

ARIA 状态修饰符还可以使用 group-aria-* 和 peer-aria-* 修饰符来定位父元素和兄弟元素

<table>
  <thead>
    <tr>
      <th aria-sort="ascending" class="group">
        Invoice #
        <svg
          class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"
        >
          <!-- ... -->
        </svg>
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

Data 属性变体

您现在可以使用新的 data-* 变体根据 data 属性有条件地设置样式。

由于根据定义没有标准的 data-* 属性，因此我们仅支持开箱即用的任意值，例如

<!-- 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>

您可以在 tailwind.config.js 文件的 theme 部分的 data 键下配置您在项目中使用的常用 data 属性选择器的快捷方式

// tailwind.config.js
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
  // ...
};

<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</div>

与框架中的许多其他变体一样，这些变体也可用作 group-* 和 peer-* 变体

<div data-size="large" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will apply `p-8` -->
  </div>
</div>
<div data-size="medium" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will not apply `p-8` -->
  </div>
</div>

最大宽度和动态断点

我们添加了一个新的 max-* 变体，允许您根据配置的断点应用最大宽度媒体查询

<div class="max-lg:p-8">
  <!-- Will apply `p-8` until the `lg` breakpoint kicks in -->
</div>

作为一般规则，我仍然建议个人使用最小宽度断点，但此功能确实解锁了一个有用的工作流程优势，即不必在不同的断点撤消某些样式。

例如，如果没有此功能，您通常最终会执行以下操作

<div class="md:sr-only xl:not-sr-only">
  <!-- ... -->
</div>

使用此功能，您可以通过在原始声明上堆叠 max-* 变体来避免撤消该样式

<div class="md:max-xl:sr-only">
  <!-- ... -->
</div>

साथ ही, हमने मनमाना मूल्यों के लिए समर्थन जोड़ा है, और एक नया min-* संस्करण जो केवल मनमाना मूल्यों को स्वीकार करता है, इसलिए आप ऐसा कुछ कर सकते हैं

<div class="min-[712px]:max-[877px]:right-16 ...">
  <!-- ... -->
</div>

重要的是要注意，这些功能仅在您的项目使用简单的 screens 配置时可用。

这些功能比它们看起来复杂得多，因为需要确保所有这些媒体查询都以某种方式在最终 CSS 中排序，以便在浏览器中为您提供预期的行为。因此，目前，它们仅在您的 screens 配置是一个简单的对象且具有字符串值时才有效，例如默认配置

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
};

如果您有复杂的配置，其中已经定义了 max-width 断点，或者基于范围的媒体查询，或者任何其他不是字符串的东西，则这些功能将不可用。我们将来可能会弄清楚这一点，但这会产生很多关于 CSS 应该如何排序的问题，我们目前还没有答案。

因此，目前（甚至可能永远），如果您想使用这些功能，您的 screens 配置需要很简单。我希望这些功能无论如何都能使复杂的 screens 配置变得不必要。

动态 group-* 和 peer-* 变体

现在可以通过将您自己的选择器传递到方括号之间以进行“分组”或“对等化”来动态创建自定义 group-* 和 peer-* 变体

<div class="group is-published">
  <div class="group-[.is-published]:block hidden">Published</div>
</div>

为了获得更多控制，您可以使用 & 字符来标记 .group 或 .peer 相对于您传入的选择器最终应出现在最终选择器中的位置

<div>
  <input type="text" class="peer" />
  <div class="peer-[:nth-of-type(3)_&]:block hidden">
    <!-- ... -->
  </div>
</div>

认真点，您可能一生只会使用这些功能三次，但它仍然很酷。希望我们可以将其用作构建块，以便在将来使 group 和 peer 更自动地与第三方插件注册的变体一起工作。

使用 matchVariant 的动态变体

您可能已经注意到许多新功能中的这种新的 variant-[...] 语法 — 这一切都由新的 matchVariant 插件 API 提供支持，该 API 使创建我们所谓的“动态变体”成为可能。

这是一个为一些假想的工具提示库创建 placement-* 变体的示例，该库使用 data-placement 属性来告诉您工具提示当前所处的位置

let plugin = require("tailwindcss/plugin");
module.exports = {
  // ...
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant(
        "placement",
        (value) => {
          return `&[data-placement=${value}]`;
        },
        {
          values: {
            t: "top",
            r: "right",
            b: "bottom",
            l: "left",
          },
        },
      );
    }),
  ],
};

上面定义的变体将为您提供诸如 placement-t 和 placement-b 之类的变体，但也支持方括号中的任意部分，因此，如果这个假想的工具提示库有其他您认为不需要创建内置值的潜在值，您仍然可以执行以下操作

<div class="placement-[top-start]:mb-2 ...">
  <!-- ... -->
</div>

使用此 API 定义自定义变体时，通常重要的是您可以控制 CSS 生成的顺序，以确保每个类相对于来自同一变体的其他值都具有正确的优先级。为了支持这一点，在定义变体时，您可以提供一个 sort 函数

matchVariant("min", (value) => `@media (min-width: ${value})`, {
  sort(a, z) {
    return parseInt(a) - parseInt(z);
  },
});

使用变体修饰符的嵌套 group 和多个 peer 支持

有时，当您有多个 group 块彼此嵌套时，您可能会遇到问题，因为 Tailwind 没有真正的方法来区分它们。

为了解决这个问题，我们添加了对变体修饰符的支持，这是一种新的动态块，您可以将其添加到变体的末尾（灵感来自我们可选的不透明度修饰符语法），您可以使用它为每个组/对等项指定您自己的标识符。

这是它的外观

<div class="group/sidebar ...">
  <!-- ... -->
  <div class="group/navitem ...">
    <a href="#" class="opacity-50 group-hover/navitem:bg-black/75 group-hover/sidebar:opacity-75">
      <!-- ... -->
    </a>
  </div>
  <!-- ... -->
</div>

这使您可以为每个组提供一个清晰的名称，该名称在该上下文中是有意义的，并且 Tailwind 将生成必要的 CSS 以使其工作。

我真的很高兴能为此提供一个解决方案，因为这是我多年来一直试图找到一个好的方法来解决的问题，而这是我们提出的第一个真正感觉它可以提供我认为应该具有的强大功能和灵活性的东西。

容器查询

我简直不敢相信，但 容器查询 终于成为现实，并且浏览器支持已非常接近使其可以用于生产环境 — 事实上，如果您正在构建 Electron 应用程序，您今天就可以使用它们。

今天我们发布了 @tailwindcss/container-queries，这是一个新的第一方插件，它使用新的 @ 语法将其与普通媒体查询区分开来，从而为框架添加了容器查询支持

<div class="@container">
  <div class="block @lg:flex">
    <!-- ... -->
  </div>
</div>

开箱即用，我们包含一组与我们的默认 max-width 比例匹配的容器大小

您可以使用 tailwind.config.js 文件中的 containers 键配置哪些值可用

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        "2xs": "16rem",
        // etc...
      },
    },
  },
};

我们还支持任意值，使用 @[...] 语法

<div class="@container">
  <div class="block @[618px]:flex">
    <!-- ... -->
  </div>
</div>

...以及使用我们现在为 group-* 和 peer-* 变体提供的相同变体修饰符语法的命名容器

<div class="@container/main">
  <!-- ... -->
  <div>
    <div class="block @lg/main:flex">
      <!-- ... -->
    </div>
  </div>
</div>

目前，我们从基于简单 min-width 的容器查询开始，但我们计划随着时间的推移扩大范围，并且当感觉我们真正掌握了 API 时，我们将把它全部引入核心。

有关完整文档，请查看 GitHub 上的插件 。

这就是 Tailwind CSS v3.2！重大改进，但只是一个次要版本更改，因此没有重大更改，您应该只需更新依赖项即可更新您的项目

npm install -D tailwindcss@latest

是的，我听到你在后面说，仍然没有文本阴影，但是嘿，至少你可以在不离开 HTML 的情况下，在复选框的父元素是列表中的第三个子元素时，设置复选框兄弟元素的样式。分清主次，各位。