Responsive Design
Tailwind builds responsive design on a mobile-first scale. md:, lg:, xl: are min-width breakpoints — they apply above their threshold. Style for the smallest screen first, then opt in to wider layouts.
Breakpoints, container queries, dark mode
EXAMPLE
<!-- 1) Default breakpoints
sm ≥ 640px
md ≥ 768px
lg ≥ 1024px
xl ≥ 1280px
2xl ≥ 1536px -->
<!-- 2) Mobile-first — base classes are mobile; prefixed are tablet+ -->
<div class="text-base md:text-lg lg:text-xl">
Scales up at md (768px) and lg (1024px).
</div>
<!-- 3) Grid that stacks → 2-col → 4-col -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<article class="p-6 bg-white rounded-lg shadow">…</article>
<article class="p-6 bg-white rounded-lg shadow">…</article>
<article class="p-6 bg-white rounded-lg shadow">…</article>
<article class="p-6 bg-white rounded-lg shadow">…</article>
</div>
<!-- 4) Hide / show by breakpoint -->
<nav class="hidden md:flex gap-4">Desktop nav</nav>
<button class="md:hidden">Mobile menu ☰</button>
<!-- 5) Responsive spacing -->
<section class="px-4 sm:px-6 md:px-8 lg:px-12 py-6 md:py-12">…</section>
<!-- 6) Layout direction flip -->
<div class="flex flex-col-reverse md:flex-row gap-6">
<aside class="w-full md:w-1/3">Sidebar (top on mobile, right on desktop)</aside>
<main class="w-full md:w-2/3">Main</main>
</div>
<!-- 7) Max-width content + responsive container -->
<div class="max-w-prose mx-auto px-4 sm:px-6 lg:px-8">
Article text capped at a comfortable reading width.
</div>
<!-- 8) Arbitrary screen breakpoints — one-off width
(avoid for systemic design; configure custom in tailwind.config) -->
<div class="hidden min-[920px]:block">Visible only ≥ 920px</div>
<div class="min-[920px]:max-[1100px]:bg-yellow-100">920–1100 only</div>
<!-- 9) max-* — UPPER bound (rarely needed for mobile-first) -->
<div class="max-md:bg-red-100">Background only BELOW md (default → md-1)</div>
<!-- 10) Container queries — react to the PARENT's width, not the viewport -->
<div class="@container">
<div class="flex flex-col @md:flex-row gap-4">
<img class="w-24 @md:w-32" src="…" alt="">
<div>Description</div>
</div>
</div>
<!-- @md == container is ≥ 28rem; component is portable across page layouts. -->
<!-- 11) Dark mode -->
<!-- tailwind.config.js -->
<script>
module.exports = {
darkMode: 'class', // toggle via .dark on <html>
// or 'media' to follow OS preference automatically
};
</script>
<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
Auto-themes when <html class="dark"> is set.
</div>
<!-- 12) Combining responsive + state + dark -->
<button class="
rounded-md px-4 py-2 font-medium
bg-indigo-600 text-white
hover:bg-indigo-700
focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500
md:px-6 md:py-3
dark:bg-indigo-500 dark:hover:bg-indigo-400
">
Save changes
</button>
<!-- 13) Print -->
<aside class="print:hidden">Sidebar (hidden when printing)</aside>
<header class="print:bg-white print:text-black">…</header>
<!-- 14) Reduce motion -->
<div class="transition motion-reduce:transition-none">…</div>
<!-- 15) Customizing breakpoints (tailwind.config.js) -->
<script>
module.exports = {
theme: {
screens: {
xs: '480px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
print: { raw: 'print' }, // custom media query
},
},
};
</script>
<!-- 16) When to choose what
• Viewport breakpoints (md:, lg:) — page layout decisions
• Container queries (@md:, @container) — component layout in unknown contexts
• min-[NNNpx] — one-off, prototype only -->
<!-- 17) Common bugs
• Writing 'md:text-base' expecting 'below md' — md: means ≥ md, not at md
• Mixing min/max breakpoints inconsistently — pick mobile-first and stick
• Forgetting flex/grid base utility (only ' md:flex ') — no flex below md
• Container queries without the @container parent — silent no-op
• Dark mode classes when darkMode is left at media but the toggle is .dark -->
Why it matters
Mobile-first means the unprefixed class is your mobile baseline; md:, lg:, xl: opt you into wider layouts. Use viewport breakpoints for the overall page and container queries (@container) for any component meant to drop into different layout contexts.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Exercise
Apply text-xl at medium screens up.
class="text-base
:text-xl"
Two letters.
Discussion
Loading…