Containter Queries

We added Talwind CSS plugin - @tailwindcss/container-queries to support container queries. You don't need to do anything to enable it, it's already enabled by default and ready to use.

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::

export const Example = () => {
  return (
    <div className="@container">
      <div className="@lg:underline">
        // This text will be underlined when the container is larger than
        `32rem`
      </div>
    </div>
  );
};

Named containers

You can optionally name containers.

export const Example = () => {
  return (
    <div className="@container/main">
      something
      <div className="@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:

export const Example = () => {
  return (
    <div className="@container">
      <div className="@[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.

export const Example = () => {
  return <div className="@container xl:@container-normal">something</div>;
};

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:

export const Example = () => {
  return (
    <div className="tw-@container">
      something
      <div className="@lg:tw-underline">something</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 */)`

Source docs form @tailwindcss/container-queries - README.md.