Tailwind Breakpoints
Check the active Tailwind CSS breakpoint live and reference the default rem values, pixel equivalents and media queries.
base sm 40rem md 48rem lg 64rem xl 80rem 2xl 96rem
Live Tailwind breakpoint
…pxviewport width
Current
base
0px-639px
Next breakpoint
sm in 640px
40rem min-width (640px equivalent)
Media query
base styles (no min-width query)
base
Default Tailwind breakpoint table
| Breakpoint | Min width | Range | Media query | Example |
|---|---|---|---|---|
| base Base | 0px | 0px-639px | base styles | grid gap-4 |
| sm Small | 40rem (640px) | 640px-767px | @media (min-width: 40rem) | sm:grid-cols-2 sm:gap-6 |
| md Medium | 48rem (768px) | 768px-1023px | @media (min-width: 48rem) | md:grid-cols-2 md:gap-6 |
| lg Large | 64rem (1024px) | 1024px-1279px | @media (min-width: 64rem) | lg:grid-cols-2 lg:gap-6 |
| xl Extra large | 80rem (1280px) | 1280px-1535px | @media (min-width: 80rem) | xl:grid-cols-2 xl:gap-6 |
| 2xl 2x large | 96rem (1536px) | 1536px+ | @media (min-width: 96rem) | 2xl:grid-cols-2 2xl:gap-6 |
Mobile-first example
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
...
</div>CSS equivalent
@media (min-width: 48rem) {
.layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Frequently asked questions
› What is the default Tailwind md breakpoint?
The default Tailwind md breakpoint starts at 48rem, which is 768px with the default browser root font size.
› Does Tailwind use max-width breakpoints by default?
No. Tailwind's default responsive variants are mobile-first min-width breakpoints. Max-width variants are available when you need to target below a breakpoint.
› Should I use device names for Tailwind breakpoints?
No. Treat breakpoints as layout thresholds, not specific devices. Test common viewport widths and adjust the layout where it actually needs to change.
Related tools
Responsive Breakpoint Checker
Check the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
Viewport Size Checker
See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
CSS Media Query Breakpoints
Reference common CSS media query widths, test your current viewport, and copy mobile-first queries for responsive layouts.
Responsive Design Testing
Test common responsive design scenarios against your live viewport: navigation, grids, forms, modals, galleries, data tables and dashboards.