Tailwind CSS Breakpoints (default)
| Name | Min-width | Media query |
|---|---|---|
| sm | 640px | @media (min-width: 640px) |
| md | 768px | @media (min-width: 768px) |
| lg | 1024px | @media (min-width: 1024px) |
| xl | 1280px | @media (min-width: 1280px) |
| 2xl | 1536px | @media (min-width: 1536px) |
Bootstrap 5 Breakpoints
| Name | Min-width | Typical devices |
|---|---|---|
| xs | < 576px | Portrait phones |
| sm | ≥ 576px | Landscape phones |
| md | ≥ 768px | Tablets |
| lg | ≥ 992px | Desktops |
| xl | ≥ 1200px | Large desktops |
| xxl | ≥ 1400px | Wider screens |
How to Use It
1
Open the tool
Go to CSS & Frontend and scroll to the Responsive Breakpoints section.
2
Select a framework or custom
Choose Tailwind, Bootstrap or set a custom min-width value.
3
Pick a breakpoint
Click the breakpoint name to see its pixel value and the corresponding media query.
4
Copy the media query
Copy the ready-to-use @media rule and paste it into your CSS file.
Pro Tips
💡Use mobile-first design: write base styles for small screens, then use
min-width media queries to layer on larger-screen styles.💡Use
em instead of px in media queries for better behaviour when users zoom — 48em = 768px at default browser font size.💡Avoid too many breakpoints. Start with 2–3 and add more only when content actually breaks, not based on specific device widths.
Frequently Asked Questions
What are CSS breakpoints?
Viewport width thresholds at which your layout changes. Defined with
@media (min-width: Xpx) { ... } — styles inside only apply when the viewport is at least X pixels wide.min-width vs max-width?
min-width is mobile-first: start simple, add complexity for larger screens. max-width is desktop-first: start full, simplify for smaller. Mobile-first is the modern approach.What are the Tailwind breakpoints?
sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) — all min-width, mobile-first.
What are the Bootstrap 5 breakpoints?
xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).
Generate media queries now
Open the Responsive Breakpoints tool and get ready-to-copy CSS media queries for any breakpoint.
Open Breakpoints Tool →