Mobile-first breakpoints
Tailwind's responsive prefixes are minimum-width conditions. An unprefixed class applies at all sizes unless overridden; md:grid-cols-2 applies from the medium breakpoint upward. This is mobile-first: build the compact layout first, then layer on changes for larger screens.
Do not interpret md: as “tablet only.” It means “at the medium breakpoint and wider.” A desktop style may remain active on very wide displays unless another breakpoint overrides it.
Tailwind's default breakpoint values can vary by version or project configuration. Learn the concept and verify exact values in your project's documentation or theme.
Responsive thinking
Base utilities:
All viewport widthsCreate a usable narrow-screen default.
`sm:` / `md:` / `lg:`:
Breakpoint and aboveAdd or override styles at larger widths.
Content-first breakpoint:
Where layout breaksChoose breakpoints based on content, not device brand names.
Mobile-first layout
<div class="grid grid-cols-1 gap-4 md:grid-cols-[15rem_minmax(0,1fr)]">
<aside class="rounded-xl bg-white p-4">Filters</aside>
<main class="min-w-0 rounded-xl bg-white p-4">Task results</main>
</div>💡 The layout is a single column on small screens. From
md upward, the sidebar receives a fixed track and the main content receives the remaining space. minmax(0,1fr) allows the main track to shrink below its content's intrinsic minimum, reducing overflow risk.Knowledge Check
What does `md:flex-row` mean in Tailwind's mobile-first model?