📏 Breakpoints

📏 Breakpoints

Breakpoint

Token and descriptionValue
breakpoint-xs
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the vertical mobile device resolution.
390px
breakpoint-sm
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the horizontal mobile device resolution.
640px
breakpoint-md
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the vertical tablet device resolution.
768px
breakpoint-lg
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the horizontal tablet device resolution.
1024px
breakpoint-xl
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the small desktop device resolution.
1280px
breakpoint-2xl
Use for responsive modifiers (e.g. `md:text-center`), the value is the min-width where that breakpoint should start. The breakpoint is inspired by the large desktop device resolution.
1536px

*the breakpoints preview width are /4