Responsive Design (Mobile-First)
Every utility class in Tailwind can be applied conditionally at different screen breakpoints by prefixing the class name with a breakpoint modifier.
Default Breakpoint Scale
| Breakpoint Prefix | Minimum Width | Target Device Range |
|---|---|---|
sm: | 640px | Large Mobile Phones (Landscape) |
md: | 768px | Tablets & iPads |
lg: | 1024px | Laptops & Desktops |
xl: | 1280px | Large Screens & Desktop Displays |
2xl: | 1536px | Ultra-Wide Monitors |
Mobile-First Philosophy: Unprefixed utilities (e.g.
text-center) apply to ALL screen sizes by default. To target larger screens, add a breakpoint prefix (e.g. md:text-left).Live Responsive Example Code
Responsive Card Layout Pattern:
<!-- Mobile (default): 1 Column, centered text, small padding Tablet (md): 2 Columns, left text, medium padding Desktop (lg): 3 Columns, large padding --> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-center md:text-left p-4 lg:p-8"> <div className="bg-white p-6 rounded-xl border">Card 1</div> <div className="bg-white p-6 rounded-xl border">Card 2</div> <div className="bg-white p-6 rounded-xl border">Card 3</div> </div>
Responsive Navigation Example
<nav className="flex items-center justify-between p-4">
<div className="font-bold text-xl">Logo</div>
<!-- Hide menu links on mobile, display flex on tablet+ -->
<div className="hidden md:flex space-x-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<!-- Show hamburger icon on mobile, hide on tablet+ -->
<button className="md:hidden text-2xl">
☰
</button>
</nav>Next Up
Master state modifiers: hover, focus, active, disabled, group-hover, and peer-checked.
Next Lesson: Hover, Focus & States →
