@tailwindcss/container-queries

To stop an element from acting as a container (for example, conditionally disabling container behavior at a certain breakpoint), use the @container-normal class.

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

To use container queries, first mark an element as a container using the @container class. You can then apply styles to child elements using container variants like @md:, @lg:, and @xl:. These styles will trigger based on the size of the container rather than the viewport.

<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>

If your Tailwind configuration uses a prefix (e.g., tw-), you must prefix both the @container class and the container query modifiers.

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

If the default sizes do not meet your needs, you can use arbitrary values with the @[value] syntax to create one-off container query breakpoints.

<div class="@container">
  <div class="@[17.5rem]:underline">
    <!-- This text will be underlined when the container is larger than `17.5rem` -->
  </div>
</div>

For Tailwind CSS v3.2+, install the plugin via npm as a development dependency:

npm install -D @tailwindcss/container-queries

You can name specific containers using the @container/{name} syntax. To target a specific named container, use the variant format @size/{name}:utility. This allows you to query against a specific ancestor container even if there are multiple containers nested in the tree.

<div class="@container/main">
  <!-- ... -->
  <div class="@lg/main:underline">
    <!-- This text will be underlined when the "main" container is larger than `32rem` -->
  </div>
</div>

After installing, add the plugin to your tailwind.config.js file within the plugins array.

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

You can extend or override the available container sizes by adding a containers key to the theme.extend section of your tailwind.config.js file.

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

To use container queries in Tailwind CSS, add the @tailwindcss/container-queries plugin to your tailwind.config.js file.

By default, the plugin provides a set of container size breakpoints under the containers theme key. You can customize these values in your configuration to define your own container query breakpoints.

You can define custom breakpoint values for container queries within the theme.containers section of your Tailwind configuration. These values will then be available as @<key> variants.

Default values provided by the plugin (if not overridden) include:

• xs: 20rem
• sm: 24rem
• md: 28rem
• lg: 32rem
• xl: 36rem
• 2xl: 42rem
• 3xl: 48rem
• 4xl: 56rem
• 5xl: 64rem
• 6xl: 72rem
• 7xl: 80rem

module.exports = {
  theme: {
    containers: {
      xs: '20rem',
      sm: '24rem',
      // ...
    }
  }
}

The plugin provides the following default container sizes:

| Name   | 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 */)` |