Back

Responsive Design

Tailwind makes responsive design easy with breakpoint prefixes. Add `md:` or `lg:` before any class to apply it only at that screen size.

```html
<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

<!-- Hide on mobile, show on desktop -->
<nav class="hidden md:flex gap-4">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
```

**Breakpoints:**
- `sm:`: 640px and up
- `md:`: 768px and up
- `lg:`: 1024px and up
- `xl:`: 1280px and up

Roadmap