Tailwind container queries

← All tools

Mark a parent with @container (optionally named), pick@sm: / @md: / @lg: child variants, and scrub container width to preview how the layout responds.

~~~

Presets

Container

Child variants

Default mins: @sm 24rem (384px), @md 28rem (448px), @lg 32rem (512px), @xl 36rem, @2xl 42rem.

Content toggles

Container width

Active:none yet

Preview

Title
Body adapts when the container crosses @ breakpoints.

Preview simulates @container variants from the slider (inline styles). Paste the markup into a Tailwind v4 (or v3.2+ with container queries) project for the real utilities.

~~~

Parent class

Child classes
Markup
Short settings sync to the URL. Named variants use the@sm/name: form when a container name is set.
~~~
About this tool
Container queries style a component from its own width, not the viewport. In Tailwind you put @container on a parent and@sm:, @md:, @lg: (and friends) on children. Named containers let nested regions respond independently.
Use them when the same card must reflow inside a narrow sidebar and a wide main column — viewport md: breakpoints cannot tell those apart. The slider here fakes container width; real behavior needs Tailwind v3.2+ with the container-queries plugin or Tailwind v4. A common mistake is putting @container on body, which just recreates media queries.
~~~
Read more