# Mobile-First Breakpoints — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/v-responsive

> sm, md, lg, xl, 2xl.

## 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.

![Three ideas: breakpoints, interaction states, dark mode.](assets/figures/tailwind/section-4-map.svg) — Figure 4.1 — Breakpoints, states and dark mode.

## A stacked-to-side-by-side layout

Column on phones, row from md upwards.

```html
<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.

**Quiz:** When does md:flex-row apply?

- [x] At the md breakpoint and wider
- [ ] Only on medium screens
- [ ] Only below md
- [ ] Only on mobile

*Answer:* At the md breakpoint and wider. Mobile-first: prefixes apply upwards.