A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.

Install the plugin from npm:

npm install -D @phucbm/tailwindcss-container-queries

Then add the plugin to your tailwind.config.js file:

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

Start by marking an element as a container using the @container class, and then applying styles based on the size of that container using the container variants like @md:, @lg:, and @xl::

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

By default we provide container sizes from @xs (20rem) to @7xl (80rem).

You can optionally name containers using a @container/{name} class, and then include that name in the container variants using classes like @lg/{name}:underline:

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

In addition to using one of the container sizes provided by default, you can also create one-off sizes using any arbitrary value:

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

To stop an element from acting as a container, use the @container-normal class.

If you have configured Tailwind to use a prefix, make sure to prefix both the @container class and any classes where you are using a container query modifier:

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

By default we ship with the following configured values:

You can configure which values are available for this plugin under the containers key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        // Min-width container queries (default)
        '2xs': '16rem',

        // Max-width container queries (new)
        'mobile': { max: '30rem' },   // @mobile applies when container width ≤ 30rem (480px)
        'tablet': { max: '48rem' },   // @tablet applies when container width ≤ 48rem (768px)

        // You can also explicitly define min-width using the object syntax
        'desktop': { min: '64rem' },  // Same as: 'desktop': '64rem'
      },
    },
  },
}

The configuration API is inspired by Tailwind's screens configuration, using the same syntax and structure.

When using a string value, the plugin creates a min-width container query:

containers: {
  'sm': '24rem'  // Creates: @container (min-width: 24rem)
}

To create max-width container queries, use an object with the max property:

containers: {
  'mobile': { max: '30rem' }  // Creates: @container (max-width: 30rem)
}

This allows you to apply styles when a container is smaller than a specified width, which is useful for mobile-first approaches or adapting layouts for smaller container contexts.

The object syntax matches how you would configure responsive breakpoints in Tailwind's screens option, making it familiar and consistent with the rest of your Tailwind configuration.