tailwindcss-responsive-darkmode

# Tailwind CSS Responsive Design & Dark Mode (2025/2026)

## Responsive Design

### Mobile-First Approach (Industry Standard 2025/2026)

Tailwind uses a mobile-first breakpoint system. With over 60% of global web traffic from mobile devices and Google's mobile-first indexing, this approach is essential.

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

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

<!-- INCORRECT: Desktop-first thinking -->
<div class="lg:text-lg md:text-base text-sm">...</div>
```

### Default Breakpoints

| Prefix | Min Width | Typical Devices | CSS Media Query |
|--------|-----------|-----------------|-----------------|
| (none) | 0px | All mobile phones | All sizes |
| `sm:` | 640px (40rem) | Large phones, small tablets | `@media (min-width: 640px)` |
| `md:` | 768px (48rem) | Tablets (portrait) | `@media (min-width: 768px)` |
| `lg:` | 1024px (64rem) | Tablets (landscape), laptops | `@media (min-width: 1024px)` |
| `xl:` | 1280px (80rem) | Desktops | `@media (min-width: 1280px)` |
| `2xl:` | 1536px (96rem) | Large desktops | `@media (min-width: 1536px)` |

### 2025/2026 Device Coverage

Common device sizes to test:
- **320px**: Older iPhones, smallest supported
- **375px**: Modern iPhone base (~17% of mobile)
- **390-430px**: Modern large phones (~35% of mobile)
- **768px**: iPad portrait
- **1024px**: iPad landscape, laptops
- **1280px**: Standard laptops/desktops
- **1440px**: Large desktops
- **1920px**: Full HD displays

### Custom Breakpoints

```css
@theme {
  /* Add custom breakpoints for specific content needs */
  --breakpoint-xs: 20rem;   /* 320px - very small devices */
  --breakpoint-3xl: 100rem; /* 1600px */
  --breakpoint-4xl: 120rem; /* 1920px - full HD */

  /* Override existing breakpoints based on YOUR content */
  --breakpoint-sm: 36rem;   /* 576px - when content needs space */
  --bre