Responsive design

#Breakpoints

An unprefixed class applies at every width. A prefixed class applies at its breakpoint and above, and overrides the smaller ones because the rules appear in that order. So grid-cols-1 md:grid-cols-2 xl:grid-cols-4 means one column on phones, two from 768px and four from 1280px.

Design for the narrowest screen first. It is usually the simplest layout, a single column, and every prefix you add after that describes one change as space grows. To test, resize the window or switch on the device toolbar in your browser developer tools and step through the widths in the table.

#A first responsive layout

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="rounded-xl border bg-surface p-4">One</div>
  <div class="rounded-xl border bg-surface p-4">Two</div>
  <div class="rounded-xl border bg-surface p-4">Three</div>
  <div class="rounded-xl border bg-surface p-4">Four</div>
</div>

Breakpoints follow the width of the browser window, not the width of this preview box. For components that should react to their own column, use container queries.

#Which utilities have breakpoint variants

Breakpoint variants are generated for the utilities that change a layout. Colors, borders, shadows and other decoration have none, because they rarely change with the screen width and leaving them out keeps the file small. Every breakpoint covers the same set:

That is 677 classes per breakpoint and 3,385 in total. The class reference shows the variants of each class.

#Hiding and showing

Combine hidden with a display class at a breakpoint. The element below is hidden on small screens and shown from md: up, while the other one does the opposite:

<span class="md:hidden">Below 768px</span>
<span class="hidden md:inline-flex">768px and up</span>
<span class="hidden lg:inline-flex">1024px and up</span>

For content that should stay available to screen readers, use sr-only md:not-sr-only instead of hidden: the text is visually hidden on small screens but still read aloud, for example the label next to an icon button.

#Responsive grids

A twelve column grid with col-span-* covers most page layouts. Start with one column, and switch to twelve at the breakpoint where the content has room:

<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
  <main class="md:col-span-8">Article</main>
  <aside class="md:col-span-4">Sidebar</aside>
  <div class="md:col-span-4">Card</div>
  <div class="md:col-span-4">Card</div>
  <div class="md:col-span-4">Card</div>
</div>

#Direction, spacing and type

The same idea works for flex direction, spacing and text size. This media object stacks on phones and sits in a row from sm: up, with more padding and a larger heading on wider screens:

<article class="flex flex-col sm:flex-row sm:items-center gap-4 rounded-2xl border bg-surface p-4 md:p-6">
  <div class="size-16 shrink-0 rounded-xl bg-gradient-to-br from-primary to-accent"></div>
  <div class="space-y-1">
    <h3 class="text-lg md:text-xl font-semibold">Weekend workshop</h3>
    <p class="text-sm text-muted-foreground">Saturday, 10:00 to 16:00. Twelve seats left.</p>
  </div>
</article>

Breakpoints only take one prefix per class, so md:hover: does not exist. Where you need both, see the workarounds in Variants.

#Fluid type and spacing

Breakpoints switch values in steps. Fluid utilities change them smoothly: each one is a clamp() of rem and vw that grows from a phone size at 360px to a desktop size at 1280px, and still follows the reader's font size setting. There are 44 of them, for text size, padding, margin and gap.

<section class="px-fluid-md py-fluid-xl">
  <h1 class="text-fluid-5xl font-extrabold">One class, every width</h1>
  <p class="mt-4 text-fluid-lg text-muted-foreground">No sm: or lg: needed.</p>
</section>

Every fluid class with its exact clamp() is listed on the fluid utilities page.

#Frequently asked questions