tailwindcss-mobile-first

# Mobile-First Responsive Design (2025/2026)

## Core Philosophy

Mobile-first design is the **industry standard for 2025/2026**. With mobile traffic consistently exceeding 60% of global web traffic and Google's mobile-first indexing, starting with mobile ensures optimal user experience and SEO performance.

### The Mobile-First Mindset

```html
<!-- CORRECT: Mobile-first (progressive enhancement) -->
<div class="text-sm md:text-base lg:text-lg">
  Start small, enhance upward
</div>

<!-- INCORRECT: Desktop-first (graceful degradation) -->
<div class="lg:text-lg md:text-base text-sm">
  Starts large, reduces down (more code, more bugs)
</div>
```

**Key Principle**: Unprefixed utilities apply to ALL screen sizes. Breakpoint prefixes apply at that size AND ABOVE.

## 2025/2026 Breakpoint Strategy

### Tailwind's Default Breakpoints

| Prefix | Min-width | Target Devices |
|--------|-----------|----------------|
| (none) | 0px | All mobile phones (base) |
| `sm:` | 640px (40rem) | Large phones, small tablets |
| `md:` | 768px (48rem) | Tablets (portrait) |
| `lg:` | 1024px (64rem) | Tablets (landscape), laptops |
| `xl:` | 1280px (80rem) | Desktops |
| `2xl:` | 1536px (96rem) | Large desktops |

### Content-Driven Breakpoints

**Best Practice 2025/2026**: Let content determine breakpoints, not device dimensions.

```css
@theme {
  /* Override defaults based on YOUR content needs */
  --breakpoint-sm: 36rem;  /* 576px - when your content needs more space */
  --breakpoint-md: 48rem;  /* 768px */
  --breakpoint-lg: 62rem;  /* 992px - common content width */
  --breakpoint-xl: 75rem;  /* 1200px */
  --breakpoint-2xl: 90rem; /* 1440px */

  /* Add custom breakpoints for specific content needs */
  --breakpoint-xs: 20rem;  /* 320px - very small devices */
  --breakpoint-3xl: 120rem; /* 1920px - ultra-wide */
}
```

### Screen Coverage Strategy

```html
<!-- Cover the most common device ranges (2025/2026 data) -->

<!-- 375px-430px: ~50% of mobile devices (iPhone, modern An