Repository files navigation

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

Install the plugin from npm:

npm install -D @tailwindcss/container-queries

Then add the plugin to yourtailwind.config.js file:

// tailwind.config.jsmodule.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::

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

By default we providecontainer 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:

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

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

<divclass="@container"><divclass="@[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:

<divclass="tw-@container"><!-- ... --><divclass="@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 thecontainers key in yourtailwind.config.js file:

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