Responsive Design and Breakpoints

Most of your visitors will arrive on a phone, so responsive design is not optional. Tailwind CSS makes it remarkably simple: prefix any utility with a breakpoint name and it applies only from that screen width upward. In this lesson you will learn the breakpoint system, the mobile-first mental model, and the patterns used to adapt layout, type, and visibility.

The Default Breakpoints

| Prefix | Minimum width | Typical device | |---|---|---| | sm: | 640px | Large phones, small tablets | | md: | 768px | Tablets | | lg: | 1024px | Laptops | | xl: | 1280px | Desktops | | 2xl: | 1536px | Large monitors |

A prefixed class such as md:text-lg compiles to a min-width: 768px media query.

Mobile-First Thinking

This is the concept beginners trip over most: unprefixed utilities are the mobile styles, and prefixes add overrides as screens grow. There is no mobile: prefix, because mobile is the default.

html

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  I grow with the screen
</h1>

Read it left to right: 24px by default, 36px from tablets, 48px on laptops and up. Each breakpoint applies from that width upward until a larger one overrides it.

Responsive Layout Switching

The most common responsive move is stacking on mobile and going horizontal on desktop:

html

<div class="flex flex-col gap-6 md:flex-row">
  <div class="flex-1 rounded-lg bg-rose-200 p-6">Column A</div>
  <div class="flex-1 rounded-lg bg-rose-300 p-6">Column B</div>
</div>

And the standard responsive card grid:

html

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
  <!-- cards -->
</div>

Showing and Hiding by Screen Size

Pair hidden with a breakpoint to swap elements between mobile and desktop, such as a hamburger button versus a full menu:

html

<button class="md:hidden">Menu</button>
<nav class="hidden md:flex md:gap-6">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Blog</a>
</nav>

The button exists only below 768px; the nav appears only above it. Note that you must re-declare the display value (md:flex, not just removing hidden).

Responsive Spacing and Containers

Any utility accepts a prefix, including padding and max-width. A typical page shell tightens padding on phones and relaxes it on desktops:

html

<main class="mx-auto max-w-6xl px-4 py-8 md:px-8 md:py-16">
  <!-- content -->
</main>

Targeting a Single Range

Occasionally you want styles for only one window of sizes. Tailwind provides max-* variants that you can stack: md:max-lg:bg-yellow-200 applies only between 768px and 1023px. This is rare in practice, but invaluable for tablet-specific bugs.

Testing Your Breakpoints

Open your browser DevTools, toggle the device toolbar, and drag the viewport slowly from 320px to 1536px. Watch for layouts that break between breakpoints, not just at them. Design for content, and add a breakpoint wherever the design starts to look wrong rather than targeting specific devices.

Key Takeaways

Tailwind is mobile-first: bare utilities are the phone styles, prefixes apply from a min-width upward.
Five breakpoints (sm through 2xl) cover phones to large monitors.
flex-col md:flex-row and grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 are the two most common responsive patterns.
hidden md:flex swaps mobile and desktop navigation.
Every single utility in Tailwind can take a responsive prefix.

Next up: Hover, Focus and Other States, where your interfaces come alive with interaction styles.