Tailwind Breakpoints
Check the active Tailwind CSS breakpoint live and reference the default rem values, pixel equivalents and media queries.
Critical widths to test
Exact widths around the selected Tailwind threshold.
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 |
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
...
</div>@media (min-width: 48rem) {
.layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}How Tailwind breakpoints apply
Tailwind responsive variants are mobile-first. Unprefixed utilities are the base styles, then
sm:,
md:,
lg:
and larger prefixes apply at their min-width thresholds. DPR and physical screen resolution do not change
which Tailwind breakpoint is active; CSS viewport width does.
Tailwind breakpoint testing set
Test exact widths around each default threshold. The width below the breakpoint catches the old layout; the threshold itself confirms the new utilities activate.
| Width | Target | Why test it |
|---|---|---|
| 639px | Below sm | Last pixel before sm utilities apply. |
| 640px | sm starts | Small breakpoint begins at 40rem. |
| 767px | Below md | Useful for checking one-column mobile layouts. |
| 768px | md starts | Common tablet and two-column layout threshold. |
| 1023px | Below lg | Last width before many desktop nav layouts appear. |
| 1024px | lg starts | Laptop and tablet landscape breakpoint. |
| 1279px | Below xl | Checks dense cards before wider desktop spacing. |
| 1280px | xl starts | Wide desktop layout threshold. |
| 1535px | Below 2xl | Last pixel before the largest default tier. |
| 1536px | 2xl starts | Large laptop and desktop canvas threshold. |
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.