Breakpoints
Breakpoints
Responsive breakpoints are min-width thresholds. Utilities become active when the viewport reaches a threshold. Hulian UI uses five breakpoints defined in preset.css.
Live breakpoint
Resize the browser window to highlight the largest matching breakpoint.
< sm< smsmsmmdmdlglgxlxl2xl2xl
Breakpoint table
| Prefix | Minimum width | rem | Typical device |
|---|---|---|---|
sm: | 640px | 40rem | Landscape phone |
md: | 768px | 48rem | Portrait tablet |
lg: | 1024px | 64rem | Landscape tablet or small laptop |
xl: | 1280px | 80rem | Desktop |
2xl: | 1536px | 96rem | Large desktop |
Responsive usage
Use unprefixed classes for the narrowest viewport, then override them at wider breakpoints. The grid below changes from one to two to four columns.
Card 1
Card 2
Card 3
Card 4
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
Source and customization
The five breakpoints are declared in the preset.css @theme block. Editing them updates both utility behavior and this table from one source of truth.
@theme {
--breakpoint-sm: 40rem; /* 640px */
--breakpoint-md: 48rem; /* 768px */
--breakpoint-lg: 64rem; /* 1024px */
--breakpoint-xl: 80rem; /* 1280px */
--breakpoint-2xl: 96rem; /* 1536px */
}