Responsive & Adaptive Patterns

What you'll learn

Use responsive prefixes (sm:, md:, lg:, xl:) for adaptive layouts

Apply mobile-first approach to every project

Build responsive grids that reflow across breakpoints

Hide and show elements at specific breakpoints

Create common responsive patterns (sidebar collapse, stacked-to-row)

Mobile-First Philosophy

Unprefixed utilities apply at the smallest breakpoint. Add prefixes like md: to override upward.

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-lg bg-blue-100 p-4">Card 1</div>
  <div class="rounded-lg bg-blue-100 p-4">Card 2</div>
  <div class="rounded-lg bg-blue-100 p-4">Card 3</div>
  <div class="rounded-lg bg-blue-100 p-4">Card 4</div>
</div>

Prefix	Min-width	Target
`sm:`	640px	Large phones
`md:`	768px	Tablets
`lg:`	1024px	Small laptops
`xl:`	1280px	Desktops

Typography Scaling & Stacked-to-Row

<article class="mx-auto max-w-prose px-4">
  <h1 class="text-2xl font-bold md:text-3xl lg:text-4xl">Responsive Heading</h1>
  <p class="mt-4 text-sm leading-relaxed text-gray-600 md:text-base">
    Body text scales up.
  </p>
</article>

<!-- Most common responsive pattern -->
<nav class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
  <a href="#" class="text-lg font-bold">Logo</a>
  <div class="flex flex-col gap-2 md:flex-row md:gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
  </div>
</nav>

Hide / Show at Breakpoints

hidden then {bp}:block to show only at certain widths. block then {bp}:hidden to hide.

<button class="block rounded bg-blue-500 px-4 py-2 text-white md:hidden">
  ☰ Menu
</button>
<aside class="hidden w-64 bg-gray-50 p-4 lg:block">Sidebar</aside>

Gotcha

Responsive prefixes stack upward. md:flex applies from md and above, not only at md.

Responsive Card Grid

Container Queries

Tailwind v4 @container support — style based on container width, not viewport.

<div class="@container">
  <div class="grid grid-cols-1 gap-4 @lg:grid-cols-2">
    <div class="rounded-lg bg-gray-100 p-4">Child adapts to container</div>
    <div class="rounded-lg bg-gray-100 p-4">Not viewport</div>
  </div>
</div>

Build a Responsive Navbar

Code

tsx

1<nav class="flex flex-col ...">2<div><a href="#" class="text-xl font-bold">MyApp</a></div>3<div class="hidden md:flex md:gap-6">4  <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a>5</div>6<button class="... md:hidden">☰</button>7</nav>

Key Takeaways

Use unprefixed utilities for mobile baseline, add breakpoint prefixes to override upward

Common patterns: stacked-to-row (flex-col md:flex-row), responsive grids (grid-cols-1 md:grid-cols-3)

Show/hide elements with hidden {bp}:block or block {bp}:hidden

Container queries (@container, @lg:) style based on container width, not viewport