Chapter 8: Responsive Design

Core Idea

Every utility class can be applied conditionally at a breakpoint by prefixing it (md:w-32); Tailwind is mobile-first, so an unprefixed utility applies at all sizes and a prefixed one only takes effect at that breakpoint and wider — there's no separate desktop-first mode.

Key Concepts

Prefix syntax: {breakpoint}:{utility}, e.g. w-16 md:w-32 lg:w-48 — width 16 by default, 32 from md up, 48 from lg up. Works for every utility in the framework, not just layout properties.
Default breakpoints (min-width, mobile-first): sm 40rem/640px, md 48rem/768px, lg 64rem/1024px, xl 80rem/1280px, 2xl 96rem/1536px — each compiles to @media (width >= <value>) { ... }.
Mobile-first means unprefixed = "at every size": sm:text-center does NOT mean "on small screens" — it means "from 640px and up". To style mobile, use the unprefixed utility (text-center), then override at larger sizes (sm:text-left). Reading sm: as "at the small breakpoint" (not "on small devices") avoids this common mistake.
Recommended build order: implement the mobile layout first (unprefixed classes), then layer on sm:, md:, etc. as the design changes at larger sizes.
Breakpoint ranges: stack a breakpoint variant with the matching max-* variant to scope a style to a range, e.g. md:max-xl:flex applies only between md and xl. Every default breakpoint has a corresponding max-* variant (max-sm → @media (width < 40rem), etc.) that can also be used alone or stacked with another max-* to target a single breakpoint's exact range.
Requires the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> must be present for breakpoint-based responsive behavior to work correctly on mobile browsers.

Code Examples


<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="" />
    </div>
    <div class="p-8"></div>
  </div>
</div>


<div class="md:max-xl:flex">...</div>

What it demonstrates: the standard mobile-first card pattern, and stacking a breakpoint with max-* to scope a style to a range instead of "and up".

Reference Tables

Prefix	Min-width	Applies
(none)	0	Always (mobile-first base)
`sm:`	40rem / 640px	640px and up
`md:`	48rem / 768px	768px and up
`lg:`	64rem / 1024px	1024px and up
`xl:`	80rem / 1280px	1280px and up
`2xl:`	96rem / 1536px	1536px and up
`max-sm:` … `max-2xl:`	—	Below that breakpoint's min-width — combine with another prefix for a range

Customizing Breakpoints

--breakpoint-* theme variables: add/override breakpoints via @theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; } — this both changes 2xl's value and adds a new xs: variant.
Unit consistency matters: keep all breakpoints in the same unit (Tailwind's defaults are rem) — mixing units can make generated utilities sort unexpectedly, causing breakpoint classes to silently override each other in the wrong order.
Removing breakpoints: reset one to initial (--breakpoint-2xl: initial;), or reset all of them (--breakpoint-*: initial;) and define a fully custom set (e.g. --breakpoint-tablet, --breakpoint-laptop, --breakpoint-desktop).
One-off breakpoints: use min-[<value>]: / max-[<value>]: arbitrary variants for a breakpoint that doesn't belong in the theme.

Key Takeaways

Default to unprefixed utilities for mobile styling; add breakpoint prefixes only for the changes needed at larger sizes.
sm: never means "small screens only" — it always means "this breakpoint and everything wider."
Use {bp}:max-{bp2}:utility when a style must apply only within a specific breakpoint window, not from a breakpoint onward.
Any utility can be responsive — there's no allowlist of "responsive-capable" properties.

Connects To

Hover, Focus & Other States: breakpoint prefixes are one variant family among many, and stack with state variants the same way (md:hover:bg-blue-700).
Theme: breakpoints themselves are theme values (--breakpoint-*), customizable/extendable via @theme the same way colors and spacing are.