Tailwind CSS Responsive Layouts: Flex, Grid and Breakpoints

Quick answer: Tailwind builds responsive layouts from two tools, flexbox and CSS grid, plus breakpoint prefixes that change them at each screen width. A common page shell is a sticky header, a centred container, a sidebar that stacks on phones, and a grid of cards. Each piece is a handful of utilities, and no custom media queries are needed. This guide builds that shell step by step and explains where flex and grid each belong.

Start with a centred container

Most pages sit inside one container that caps the line length and centres itself. mx-auto centres a block, max-w-6xl caps its width and px-4 keeps text off the screen edges on phones.

<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
  <!-- page content -->
</div>

Flexbox for rows, grid for two-dimensional layouts

Use flex when items sit in one line and should share space, such as a navbar or a row of buttons. Use grid when you have rows and columns that must line up, such as a card gallery. justify-between pushes items to opposite ends of a flex row, and items-center aligns them vertically.

<nav class="flex items-center justify-between px-6 py-4">
  <span class="font-bold">Brand</span>
  <div class="flex gap-4">
    <a href="#">Docs</a>
    <a href="#">Blog</a>
  </div>
</nav>

A responsive card grid

Start with one column and add columns at wider breakpoints. This grid is one column on phones, two from sm and three from lg, with a consistent gap.

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-xl border border-slate-200 p-6">Card one</article>
  <article class="rounded-xl border border-slate-200 p-6">Card two</article>
  <article class="rounded-xl border border-slate-200 p-6">Card three</article>
</div>

A sidebar that stacks on phones

A two-column page should become one column on small screens. Use a grid with one column by default and lg:grid-cols-[16rem_1fr] for a fixed sidebar beside the main content. Put the sidebar first in the source when it matters for navigation, and use order- utilities only when the visual order must differ from the document order.

<div class="grid grid-cols-1 gap-8 lg:grid-cols-[16rem_1fr]">
  <aside class="rounded-lg bg-slate-50 p-4">Sidebar</aside>
  <main class="min-w-0">Main content</main>
</div>

Sticky headers and full-height sections

A header that stays visible needs sticky top-0 plus a background and a z-index so content scrolls beneath it cleanly. For a hero that fills the viewport, min-h-screen sets the minimum height to the window height, and flex items-center centres its content vertically.

<header class="sticky top-0 z-50 bg-white/90 backdrop-blur">...</header>
<section class="flex min-h-screen items-center justify-center">...</section>

Common layout mistakes

Three mistakes account for most broken layouts. First, a flex or grid child with long text can refuse to shrink, so add min-w-0 to let it wrap. Second, a grid that looks right at one width can overflow at another, so test every breakpoint rather than only your laptop. Third, fixed heights clip content on phones, so prefer min-h and let content set the rest.

Testing a layout at every breakpoint

A layout is only finished once you have seen it at each width where a breakpoint changes it. Tailwind’s breakpoints are 640px for sm, 768px for md, 1024px for lg and 1280px for xl. Check a width just below and just above each one, because the most common overlap bug appears in the gap between two breakpoints. Browser developer tools with a responsive mode make this quick, and resizing slowly reveals where text wraps badly or a grid column becomes too narrow to read.

Two habits keep this manageable. Start every layout at the narrowest width and add prefixes only when the design needs them, so you never fix a desktop layout to find that phones break. And prefer spacing and gap utilities over fixed pixel widths, because gaps adapt to the container while a fixed width stops adapting the moment the viewport changes.

Frequently asked questions