Adapting Across Widths

The default number of breakpoints is zero. Build one layout that is already fluid — percentage and fr columns, clamp()ed type, wrapping flex rows — confirm it survives from 320px up, and then add a breakpoint only at the exact width where you can point at something breaking. Most layouts that ship with five breakpoints needed one, and each unnecessary one is a state nobody will test again. The sibling layout composes the page at a single width — regions, columns, container cap, layer order — and this skill is only concerned with what changes as the width changes; if the regions and their order are not settled yet, that work is layout's and belongs before any of this. Safe-area insets live here rather than in native-feel, which owns whether an app reads as installed, not how a viewport is measured.

Adopt the project's breakpoint names before writing a query. Read the Tailwind theme.screens (or --breakpoint-* in v4), a @custom-media block, or the SCSS mixins already in use, and express every rule through them. A hand-written @media (min-width: 811px) inside a Tailwind codebase is invisible to anyone reading the config, and a sixth breakpoint added for one component taxes every future one. If a component needs a boundary the project does not have, that is usually the signal it should be a container query instead.

Quick Reference

Core Principles

1. Add a breakpoint where the content breaks, never at a device width. Named device sizes are a moving target and routinely miss the real failure point by a hundred pixels either way. The procedure is mechanical: drag the viewport from 320px upward and record the first width at which something fails — a headline reaching four lines, a card's text dropping under about 30ch, two buttons colliding, a label wrapping mid-word — then put the breakpoint there. Exception: if the project already has a named set, snap to the nearest existing name rather than adding a one-off; consistency beats precision at this scale.

2. Use min-width only, and write it in rem. Min-width queries are additive, so the base styles are the fallback and nothing has to be undone; mixing directions for the same property produces a rule whose winner depends on source order. Write @media (min-width: 48rem). The unit matters for a non-obvious reason: media queries resolve rem against the browser's default font size, not against html { font-size }, so a user who raised their default text size gets an earlier layout change — a px query ignores them entirely. Exception: queries with no additive form, which are legitimately one-directional — @media (max-height: 667px) for short landscape viewports, print, and the prefers-* family.