7 breakpoints from 240px to 1920px. Open Props exposes breakpoints as custom media queries rather than utility class prefixes.
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
--xxs | 15em | 240 | @media (min-width: 15em) | 227 |
--xs | 24em | 384 | @media (min-width: 24em) | 182 |
--sm | 30em | 480 | @media (min-width: 30em) | 104 |
--md | 48em | 768 | @media (min-width: 48em) | 95 |
--lg | 64em | 1024 | @media (min-width: 64em) | 63 |
--xl | 90em | 1440 | @media (min-width: 90em) | 38 |
--xxl | 120em | 1920 | @media (min-width: 120em) | 10 |
Configuration
@import "open-props/media";
@media (--md-n-above) { /* 768px and up */ }How Open Props 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 Open Props breakpoints?
Open Props v1 ships 7 tiers: --xxs (240px), --xs (384px), --sm (480px), --md (768px), --lg (1024px), --xl (1440px), --xxl (1920px).
Are Open Props breakpoints min-width or max-width?
Open Props is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Open Props 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 Open Props use em?
Breakpoints in em 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.