Mobile-First Breakpoints

Unprefixed applies everywhere, prefixes apply upwards

Tailwind is mobile-first: unprefixed utilities apply at every width, and a prefix such as md: applies from that breakpoint upwards (md is 48rem, 768px by default; sm 40rem, lg 64rem, xl 80rem, 2xl 96rem). Design the small screen first, then add overrides for larger screens. max-md: targets widths below a breakpoint, and ranges combine (md:max-xl:). Custom breakpoints are defined as --breakpoint-* theme variables.

Variants change styles conditionally

Prefixes like md:, hover: and dark: apply utilities only under certain conditions.

A stacked-to-side-by-side layout

Column on phones, row from md upwards.

<section class="flex flex-col gap-6 p-4 md:flex-row md:items-center md:p-8">
  <img class="w-full rounded-xl md:w-1/2" src="/hero.jpg" alt="Product screenshot">
  <div class="md:w-1/2">
    <h2 class="text-2xl font-bold md:text-4xl">Ship faster</h2>
    <p class="mt-2 text-gray-600">Works on every screen size.</p>
  </div>
</section>

Do not use sm: to mean "mobile"

sm: applies from 40rem upwards; mobile styles are the unprefixed ones.

Quick check: When does md:flex-row apply?

• At the md breakpoint and wider
• Only on medium screens
• Only below md
• Only on mobile