Responsive Design

Tailwind is mobile-first. Unprefixed utilities apply to all sizes. Prefix with sm:, md:, lg:, xl:, 2xl: for larger screens.

Mobile-first breakpoints

Tailwind is mobile-first. Unprefixed utilities apply to all sizes. Prefix with sm:, md:, lg:, xl:, 2xl: for larger screens.

Responsive patterns

<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">

<!-- Hide on mobile, show on desktop -->
<aside class="hidden lg:block w-64">

<!-- Responsive text -->
<h1 class="text-2xl sm:text-3xl lg:text-5xl">

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

Default breakpoints

sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px.
Design mobile layout first, then add breakpoint overrides.