What is the difference between a container query and a media query?

A media query responds to the viewport (the whole browser window), while a container query responds to the size of a specific ancestor element — its container. That means the same component can lay itself out differently depending on the space it is placed in, so a card in a narrow sidebar and the same card in a wide main column can each pick the right layout without knowing the page width.

What does container-type: inline-size do, and when would I use size or normal?

container-type establishes an element as a query container. inline-size makes only the inline dimension (usually width) queryable and is the most common choice because it avoids layout loops. size makes both width and height queryable, which you need for height-based @container rules but which requires the container to have a defined size. normal turns off size queries (the element can still be a container for style/scroll-state queries). This tool defaults to inline-size.

Do I need a plugin to use container queries in Tailwind?

It depends on your version. Tailwind v4 ships container query support built in, so you can use the @container variant and @min-[…]/@max-[…] utilities with no plugin. Tailwind v3 needs the official @tailwindcss/container-queries plugin: install it with pnpm add -D @tailwindcss/container-queries and add require("@tailwindcss/container-queries") to your config plugins. This tool generates the correct usage for whichever version you pick.

What are the cqw, cqi, and other cq* units?

They are container query length units, relative to the nearest query container rather than the viewport. cqw and cqh are 1% of the container’s width and height; cqi and cqb are 1% of its inline and block size; cqmin and cqmax are the smaller and larger of cqi and cqb. They are great for fluid typography and spacing — for example font-size: clamp(2rem, 6cqi, 4rem) scales a heading with its container’s width.

Why does the preview respond instead of just showing static CSS?

The tool injects a scoped stylesheet using a unique container-name and wrapper class that only targets the preview, so your @container rules actually apply to the sample card. A ResizeObserver reads the real rendered width as you drag or use the slider, and the active breakpoint is whichever of your ranges currently matches — the same last-rule-wins cascade the browser uses.

Is browser support good enough to ship container queries?

Yes for most projects. Size container queries (container-type and @container with min/max-width) are supported in all current major browsers — Chrome, Edge, Firefox, and Safari. If you must support very old versions you can treat the container-query layout as a progressive enhancement over a sensible default, since browsers that do not understand @container simply ignore those blocks.

Container Queries Generator

The first genuinely interactive CSS @container playground. Drag a resizable preview container and watch a real component re-flow as your breakpoints fire — then export the @container CSS, SCSS, or Tailwind (v4 built-in & v3 plugin) utilities. Includes presets and a cq* units reference.

About this ToolHow it works, benefits & use cases

Most container-query references show you the syntax and leave you guessing how it will actually behave — this is a live playground where you size the container yourself. Drag the resizable preview box (or use the width slider) from 200px to 800px and watch a real card component re-flow as each of your breakpoints fires, with the currently active breakpoint highlighted in real time. You define the containment context by setting a container-name and choosing a container-type (inline-size, size, or normal), pick the child selector your rules target, then add as many @container breakpoints as you need. Each breakpoint takes an optional min-width and max-width plus a small CSS editor for the declarations applied at that range, and you can reorder or delete them freely. Start from presets like a card that goes from stacked to side-by-side, a sidebar-or-stack layout, fluid responsive typography, or a 1-to-3-column product grid. When it looks right, export plain CSS, SCSS with nested @container blocks, Tailwind v4 (where @container is built in), or Tailwind v3 using the official @tailwindcss/container-queries plugin. A reference card explains every cqw, cqh, cqi, cqb, cqmin, and cqmax unit.

How to Use

1Set the container name and choose a container-type — inline-size is the common width-aware default.
2Set the child selector (e.g. .card) that the breakpoint rules should restyle inside the container.
3Add breakpoints, giving each a min-width and/or max-width and the CSS declarations to apply in that range.
4Drag the resizable preview box or move the width slider to watch the active breakpoint change and the card re-flow.
5Load a preset (card, sidebar/stack, responsive typography, product grid) as a starting point and tweak it.
6Pick CSS, SCSS, Tailwind v4, or Tailwind v3 output, then copy, download, share the URL, or pipe it to another tool.

Key Benefits

A genuinely interactive, resizable container — see breakpoints fire instead of imagining them
Live "active breakpoint" indicator that updates as you drag, driven by a ResizeObserver
Unlimited @container breakpoints with min-width, max-width, labels, and per-range CSS
Reorder and delete breakpoints, with first-class unbounded (Any) min/max widths
Four ready presets: card stack-to-row, sidebar-or-stack, fluid typography, and product grid
Exports plain CSS, nested SCSS, Tailwind v4 (built-in), and Tailwind v3 (plugin) usage
Built-in cqw/cqh/cqi/cqb/cqmin/cqmax units reference and a shareable, browser-only URL

Common Use Cases

Building a card component that adapts to a sidebar, a wide hero, or a tight grid cell
Designing a layout that switches between a single column and a content-plus-sidebar grid
Creating fluid headings sized with cqi so type scales with the container, not the viewport
Prototyping a product grid that steps from one to three columns as space allows
Migrating viewport media queries to component-scoped @container rules for reusable UI

Live container

420pxBP 2 · Wide → side-by-side

Container width

Media

Card title

Resize the container — this layout responds to the.cq-preview-childrules from your active @container breakpoint, not the viewport.

ActionDetails

Drag the bottom-right handle or use the slider. Showingcontainer-type: inline-size

Container

Container name

container-name: card

Container type

Child selector

The descendant the breakpoint rules target.

Breakpoints (2)

1
Min width
px
Max width
px
Label (optional)
CSS declarations
display: flex; flex-direction: column; gap: 0.75rem;
2Active now
Min width
px
Max width
Unbounded
Label (optional)
CSS declarations
display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; align-items: center;

Presets

Output format

CSS output

Copy, download, share, or pipe to another tool

/* 1. Establish the containment context on the parent. */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Narrow → stacked */
@container card (min-width: 0px) and (max-width: 359px) {
  .card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Wide → side-by-side */
@container card (min-width: 360px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    align-items: center;
  }
}

Container query units (`cq*`)

cqw1% of the query container’s width

cqh1% of the query container’s height

cqi1% of the container’s inline size (usually width)

cqb1% of the container’s block size (usually height)

cqminthe smaller of cqi and cqb

cqmaxthe larger of cqi and cqb

Query the container, not the viewport

Container queries let a component adapt to the space it actually sits in, so the same card looks right in a sidebar, a wide hero, or a tight grid cell. Declare a containment context with container-type on the parent, then write @container blocks that re-style descendants by the container’s size. This tool gives you a real, resizable container so you can watch the breakpoints fire — then exports plain CSS, SCSS, Tailwind v4 (built-in @container) or Tailwind v3 (the @tailwindcss/container-queries plugin).

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Related guide

Guide · 14 min readTailwind CSS v3 to v4: The Complete Migration Guide (2026)Tailwind v4 is a ground-up rewrite. The upgrade tool handles most of it, but the CSS-first config, the renamed utilities, the rebuilt dark mode, and the browser-support floor are where teams get stuck. Exactly what changed and how to move across cleanly.Read the guide

Container Queries Generator

How to Use

Key Benefits

Common Use Cases

Container

Breakpoints (2)

Presets

Container query units (cq*)

Query the container, not the viewport

Was this tool helpful?

Share Your Experience

Related guide

Related tools

Frequently Asked Questions - Container Queries Generator

Container query units (`cq*`)