Breakpoints

sm640px
md768px
lg1024px
xl1280px
2xl1536px

Container queries

The right tool for components. A card in a narrow sidebar should reflow even on a wide screen — viewport breakpoints can't express that, container queries can.

Deploys

49

Builds

42

Domains

49

Members

49

Usage

35

Logs

28

Rules

Reflow, don't shrink

A 3-column grid becomes 1 column. It does not become three squeezed columns.

Cap the measure

Body text stops at ~65 characters regardless of screen width.

Sidebars collapse, then hide

Icon-only at md, off-canvas below it — never a squeezed 120px rail.

Tables scroll, not wrap

Horizontal scroll with a frozen first column beats stacking cells.

Touch targets grow

44px minimum below md, even where the desktop control is 32px.

Content widths

Three that cover almost everything.

max-w-md448px — Forms, auth, single-column dialogs
max-w-3xl768px — Reading and documentation
max-w-6xl1152px — App shells and dashboards