@tailwindcss/container-queries

一个适用于 Tailwind CSS v3.2+ 的插件，提供容器查询工具。

安装

从 npm 安装插件：

npm install @tailwindcss/container-queries

然后将插件添加到你的 tailwind.config.js 文件中：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}

使用方法

首先使用 @container 类将元素标记为容器，然后使用容器变体（如 @md:、@lg: 和 @xl:）根据该容器的大小应用样式：

<div class="@container">
  <div class="@lg:underline">
    <!-- 当容器大于 `32rem` 时，这段文本将被添加下划线 -->
  </div>
</div>

默认情况下，我们提供从 @xs（20rem）到 @7xl（80rem）的容器尺寸。

命名容器

你可以使用 @container/{name} 类为容器命名，然后在容器变体中使用类似 @lg/{name}:underline 的类来包含该名称：

<div class="@container/main">
  <!-- ... -->
  <div class="@lg/main:underline">
    <!-- 当 "main" 容器大于 `32rem` 时，这段文本将被添加下划线 -->
  </div>
</div>

任意容器尺寸

除了使用默认提供的容器尺寸外，你还可以使用任意值创建一次性尺寸：

<div class="@container">
  <div class="@[17.5rem]:underline">
    <!-- 当容器大于 `17.5rem` 时，这段文本将被添加下划线 -->
  </div>
</div>

移除容器

要停止一个元素作为容器，使用 @container-normal 类。

<div class="@container xl:@container-normal"> <!-- ... --> </div>

使用前缀

如果你已将 Tailwind 配置为使用前缀，请确保在 @container 类和任何使用容器查询修饰符的类中都加上前缀：

<div class="tw-@container">
  <!-- ... -->
  <div class="@lg:tw-underline">
    <!-- ... -->
  </div>
</div>

配置

默认情况下，我们提供以下配置值：

名称	CSS
@xs	@container (min-width: 20rem /* 320px */)
@sm	@container (min-width: 24rem /* 384px */)
@md	@container (min-width: 28rem /* 448px */)
@lg	@container (min-width: 32rem /* 512px */)
@xl	@container (min-width: 36rem /* 576px */)
@2xl	@container (min-width: 42rem /* 672px */)
@3xl	@container (min-width: 48rem /* 768px */)
@4xl	@container (min-width: 56rem /* 896px */)
@5xl	@container (min-width: 64rem /* 1024px */)
@6xl	@container (min-width: 72rem /* 1152px */)
@7xl	@container (min-width: 80rem /* 1280px */)

你可以在 tailwind.config.js 文件中的 containers 键下配置此插件可用的值：

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