📏 Breakpoints
Breakpoint
Token and description | Value |
---|---|
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