📱 Screen

📱 Screen

Screen

Token and descriptionValue
screen-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
screen-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
screen-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
screen-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
screen-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
screen-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 screens preview width are /4