Note

As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required.

@tailwindcss/container-queries

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

Installation

Install the plugin from npm:

npm install -D @tailwindcss/container-queries

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

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

Usage

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 provide container sizes from @xs (20rem) to @7xl (80rem).

Named containers

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>

Arbitrary container sizes

In addition to using one of the container 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>

Removing a container

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

With a prefix

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>

Configuration

By default we ship with the following configured values:

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

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

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