Responsive design is building interfaces that adapt to different screen sizes — phones, tablets, laptops, and giant monitors. Tailwind makes responsive design simple by letting you apply styles at specific breakpoints using prefixes.
Mobile-first approach
Tailwind uses a mobile-first approach. Styles without a breakpoint prefix apply to all screen sizes. Styles with a prefix like md: only apply at that breakpoint and above.
<!-- This is the mobile layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded shadow p-6">Card 1</div>
<div class="bg-white rounded shadow p-6">Card 2</div>
<div class="bg-white rounded shadow p-6">Card 3</div>
</div>
On mobile, the cards stack vertically (1 column). On tablets, 2 columns. On desktop, 3 columns. All without writing a single media query.
How prefixes work
Prefixes are just added before any Tailwind utility class. They override the base style at that breakpoint.
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
Text that grows with screen size
</div>
Min-width vs max-width
Tailwind breakpoints use min-width, which means styles apply at that width and larger. This is the opposite of max-width media queries, which apply at that width and smaller. Mobile-first is considered the best practice because it loads the simplest styles first.
Common responsive patterns
- Stacking:
flex-col md:flex-row— vertical on mobile, horizontal on desktop - Hiding:
hidden md:block— hide on mobile, show on desktop - Padding:
p-4 md:p-8 lg:p-12— more padding on larger screens - Typography:
text-2xl md:text-4xl— larger headings on desktop