Responsive Design and Breakpoints
Master mobile-first responsive variants, breakpoint strategy, container behavior, and real-device testing.
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.
All viewport widthsBreakpoint and aboveWhere layout breaks<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>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.What does `md:flex-row` mean in Tailwind's mobile-first model?
Responsive typography, spacing, and visibility
Responsive design is not limited to column counts. Adjust type size, padding, alignment, and visibility to match the content's needs. For example, a page heading might use text-2xl sm:text-3xl lg:text-5xl; a navigation label may be hidden on very narrow screens while an accessible icon button remains available.
Use hidden carefully: it removes an element from layout and generally from the accessibility tree. If an item must remain available to screen readers, use an appropriate visually-hidden technique rather than hidden.
<section class="px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
<div class="mx-auto max-w-4xl text-center">
<p class="text-sm font-semibold text-blue-700">Plan with confidence</p>
<h1 class="mt-3 text-3xl font-bold tracking-tight sm:text-4xl lg:text-6xl">A better view of your work</h1>
<p class="mx-auto mt-4 max-w-2xl text-base leading-7 text-slate-600 sm:text-lg">
Turn busy task lists into a clear plan your whole team can follow.
</p>
<div class="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
<a href="#start" class="rounded-lg bg-blue-600 px-5 py-3 font-semibold text-white">Get started</a>
<a href="#learn" class="rounded-lg border px-5 py-3 font-semibold">Learn more</a>
</div>
</div>
</section>- Responsive prefixes are minimum-width conditions.
- Adjust spacing and typography as well as layout columns.
- Do not hide essential actions without providing an accessible alternative.
Container strategy and responsive testing
A responsive page needs both flexible layout and a sensible maximum content width. A centered container such as mx-auto max-w-7xl px-4 prevents content from stretching too far on large monitors. Sidebars, data tables, and code blocks may need their own overflow strategy.
Test at widths between your usual device presets, not only at exact breakpoints. A layout that works at 390 px and 768 px may still break at 620 px because of a long label or button group. Check browser zoom, larger text, keyboard navigation, and real content—not just short placeholder strings.
Inspect long headings, empty states, validation errors, translated labels, and cards with unusually long names. These reveal responsive bugs that placeholder text hides.
- Constrain content width for readability.
- Test just below and above each breakpoint.
- Use real or realistic content when validating responsive layouts.