Responsive design with breakpoint prefixes

A responsive layout changes with the screen width. Instead of media queries in CSS, Tailwind gives you prefixes: md:grid-cols-3 means "three columns when the screen is at least 768 pixels wide".

Breakpoints

A breakpoint is the screen width from which other styles apply. Tailwind has five:

Mobile-first

A class without a prefix works at any width, and a prefixed class works from its breakpoint upward. So you first write styles for a phone and then add changes for larger screens. This approach is called mobile-first:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="bg-rose-200 p-4 sm:bg-amber-200 md:bg-emerald-200">
  Resize the browser window
</p>

Make the browser window narrow, then wide: the background changes from pink to yellow to green. The example sits inside the lesson page, so the width is that of its area, not of the whole window.

A responsive catalog

The product grid: one column on a phone, two on a tablet, three on a computer:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-lg bg-white p-4 shadow">Headphones — $79</div>
  <div class="rounded-lg bg-white p-4 shadow">Speaker — $45</div>
  <div class="rounded-lg bg-white p-4 shadow">Charger — $19</div>
</div>

A prefix works with any utility — spacing, font size, visibility. For example, hidden md:block hides an element on a phone and shows it on wide screens.

A horizontal card

On a wide screen the product card works well horizontally: the image on the left, text on the right:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="overflow-hidden rounded-xl bg-white shadow-lg sm:flex">
  <img src="/media/photo-400x250.jpg" alt="Headphones" class="h-48 w-full object-cover sm:h-auto sm:w-48">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Wireless headphones</h2>
    <p class="mt-2 text-sm text-gray-600">Noise cancelling and 30 hours of playback.</p>
    <p class="mt-4 text-xl font-bold">$79</p>
  </div>
</div>

On a narrow screen the image is on top at full width; on a wide one sm:flex puts it in a row with the text.

Only below a breakpoint

The max- prefix limits a style to widths below a breakpoint: max-md:hidden hides an element on screens narrower than 768 pixels. Prefixes combine into a range: md:max-xl:flex applies only between md and xl.

Common mistake

Thinking that sm: means "on small screens":

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="sm:text-center">Only on a phone?</p>

In fact sm:text-center applies from 640 pixels upward and does nothing on a phone. The phone style is written without a prefix and overridden for larger screens: text-center sm:text-left.