3 min read
•Question 2 of 38easyHow does Responsive Design work in Tailwind?
Using breakpoint prefixes for responsive layouts.
What You'll Learn
- Breakpoint prefixes
- Mobile-first approach
- Common patterns
Breakpoint Prefixes
index.htmlHTML
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Full width on mobile -->
<!-- Half width on md (768px+) -->
<!-- Third width on lg (1024px+) -->
</div>Default Breakpoints
| Prefix | Min Width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Mobile-First
Tailwind is mobile-first - unprefixed utilities apply to all screens:
index.htmlHTML
<div class="text-sm md:text-base lg:text-lg">
<!-- Small text by default, grows on larger screens -->
</div>