Tailwind CSS Breakpoints
Complete Tailwind v4 responsive breakpoints reference.
Mobile-first design with 5 breakpoint prefixes.
Breakpoint Scale
Quick Reference
| Prefix | Min Width | Pixels | CSS Media Query | |
|---|---|---|---|---|
| sm: | 40rem | 640px | @media (width >= 40rem) | |
| md: | 48rem | 768px | @media (width >= 48rem) | |
| lg: | 64rem | 1024px | @media (width >= 64rem) | |
| xl: | 80rem | 1280px | @media (width >= 80rem) | |
| 2xl: | 96rem | 1536px | @media (width >= 96rem) |
Usage Examples
Responsive Width
<div class="w-full md:w-1/2 lg:w-1/3"> Full on mobile, half on tablet, third on desktop </div>
Responsive Grid
<div class="grid grid-cols-1
md:grid-cols-2
lg:grid-cols-4">
</div>Hide/Show
<div class="hidden md:block"> Hidden on mobile, visible on tablet+ </div> <div class="md:hidden"> Mobile only </div>
Responsive Spacing
<section class="p-4 md:p-8 lg:p-12"> Padding increases with screen size </section>
About Tailwind Breakpoints
Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes, while prefixed utilities apply at that breakpoint and above.
md:flex means "apply flex at 768px and wider" - not "only at 768px".
For custom breakpoints, define them in your CSS: @custom-media --tablet (width >= 900px);
See these breakpoints in action with real layout patterns: Tailwind Responsive Patterns →
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow