5 breakpoints from 640px to 1536px. Tailwind v4 states breakpoints in rem (assuming a 16px root) rather than px. An unprefixed utility applies at every width; a prefixed one applies from its breakpoint upward.
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
sm | 40rem | 640 | @media (width >= 40rem) | 99 |
md | 48rem | 768 | @media (width >= 48rem) | 95 |
lg | 64rem | 1024 | @media (width >= 64rem) | 63 |
xl | 80rem | 1280 | @media (width >= 80rem) | 50 |
2xl | 96rem | 1536 | @media (width >= 96rem) | 24 |
Configuration
// tailwind.config.js — overriding the defaults
export default {
theme: {
screens: {
sm: '40rem',
md: '48rem',
lg: '64rem',
xl: '80rem',
'2xl': '96rem',
},
},
}How Tailwind CSS compares
| Framework | Unit | 480 | 576 | 600 | 640 | 768 | 992 | 1024 | 1200 | 1280 | 1440 | 1536 | 1600 | 1920 | Only here |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tailwind CSS | rem | · | · | · | sm | md | · | lg | · | xl | · | 2xl | · | · | — |
| Bootstrap | px | · | sm | · | · | md | lg | · | xl | · | · | · | · | · | 1400 xxl |
| MUI (Material UI) | px | · | · | sm | · | · | · | · | lg | · | · | xl | · | · | 900 md |
| Bulma | px | · | · | · | · | · | · | desktop | · | · | · | · | · | · | 769 tablet, 1216 widescreen, 1408 fullhd |
| Foundation | em | · | · | · | medium | · | · | large | xlarge | · | xxlarge | · | · | · | — |
| Chakra UI | em | sm | · | · | · | md | lg | · | · | xl | · | 2xl | · | · | — |
| Ant Design | px | · | sm | · | · | md | lg | · | xl | · | · | · | xxl | · | — |
| Vuetify | px | · | · | sm | · | · | · | · | · | lg | · | · | · | xl | 960 md, 2560 xxl |
| Material Design 3 | dp | · | · | Medium | · | · | · | · | Large | · | · | · | Extra-large | · | 840 Expanded |
| Open Props | em | --sm | · | · | · | --md | · | --lg | · | · | --xl | · | · | --xxl | 240 --xxs, 384 --xs |
Questions
What are the default Tailwind CSS breakpoints?
Tailwind CSS v4.3 ships 5 tiers: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).
Are Tailwind CSS breakpoints min-width or max-width?
Tailwind CSS is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Tailwind CSS breakpoints?
Override them in the configuration — see the snippet on this page. Changing them is usually a mistake unless you have a concrete layout reason; the defaults are chosen to sit between real device clusters.
Why does Tailwind CSS use rem?
Breakpoints in rem respond to the user's browser font-size setting, so someone who has increased their default text size gets the layout that suits it. Pixel breakpoints ignore that preference.