Responsive Prefixes

Responsive design in Tailwind is just another variant prefix. Any utility can be scoped to a screen size, so media queries live right next to the rest of the styling.

Mobile-First Means Unprefixed Wins Small

An unprefixed utility applies at every size. A prefixed one applies at that breakpoint and up. So you write the small-screen design plainly, then layer overrides:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 1 column on phones, 2 on tablets, 4 on desktop -->
</div>

A common mistake is using sm: to mean “on small screens.” It actually means “from the sm breakpoint upward.” The base styles are your mobile styles.

The Default Breakpoints

Customizing Breakpoints

Because v4 is CSS-first, you add or change breakpoints in @theme:

@import "tailwindcss";

@theme {
  --breakpoint-3xl: 120rem;
}

Now 3xl:grid-cols-6 works automatically. You can also target a single range with the max-* variants:

<!-- Only below md -->
<div class="block max-md:hidden">desktop-only banner</div>

<!-- Only the md..lg band, by stacking min and max -->
<div class="hidden md:max-lg:block">tablet-only note</div>

Stacking md: with max-lg: brackets a precise window without writing a media query by hand.