📏 Breakpoints
Breakpoint
| Token and description | Value |
|---|---|
breakpoint-xsUse 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-smUse 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-mdUse 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-lgUse 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-xlUse 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-2xlUse 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