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

Install the plugin from npm:

npm install @tailwindcss/container-queries

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

// tailwind.config.js module.exports = { theme: { // ... }, plugins: [ require('@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"></div> <!-- 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.

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: { '2xs': '16rem', }, }, }, }