baseUtilities
Responsive design
Container style query prefixes (@xs: to @xl:) and supported utility families.
Responsive utilities use container style queries with @ prefixes: @xs:, @sm:, @md:, @lg:, @xl:.
Loading components…
<div class="flex flex-col gap-xs w-full"> <span class="text-xs text-muted-foreground font-strong"> grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4 — expand to widen the container. </span> <div class="grid grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4 gap-md w-full"> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 2 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 3 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 4 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 5 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 6 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 7 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 8 </div> </div></div>Prefixes
Each prefix applies min-width style rules at or above the threshold:
| Prefix | Threshold | Token |
|---|---|---|
| (none) | Base view | None |
@xs: | 40rem | --breakpoint-xs |
@sm: | 48rem | --breakpoint-sm |
@md: | 64rem | --breakpoint-md |
@lg: | 80rem | --breakpoint-lg |
@xl: | 96rem | --breakpoint-xl |
<div class="grid grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4 gap-md">...</div>How breakpoints work
_variables.cssdefines--breakpoint-*length tokens.- The
bodyelement acts as a container (container-name: body). Container size queries set boolean flags (--is-breakpoint-md: true) when width thresholds are reached. - Responsive classes evaluate
@container style(--is-breakpoint-md: true).
Supported responsive families
- Container:
container(anddata-variant="article") - Display:
hidden,block,flex,inline-flex,grid - Subgrid:
grid-cols-subgrid,grid-rows-subgrid - Grid tracks:
grid-cols-1...12,grid-rows-1...12 - Grid spans:
col-span-1...12,row-span-1...12 - Flex direction:
flex-row,flex-col - Flex basis:
basis-0,basis-auto,basis-full,basis-1/2...1/6 - Align items:
items-start,items-center,items-end,items-stretch - Justify content:
justify-start,justify-center,justify-end,justify-stretch,justify-around,justify-between - Text align:
text-left,text-center,text-right,text-justify
Base-only families
To keep CSS size compact, the following families do not generate responsive prefixes:
- Self alignment (
self-*,justify-self-*,place-items-*) - Spacing (
p-*,m-*,gap-*), sizing (w-*,h-*,size-*), and negative margins - Color, borders, radius, shadow, opacity, and scale
Change layout structure at breakpoints (e.g. @md:flex-row) to adapt spacing instead of using per-breakpoint spacing classes.
Loading components…
<div class="flex flex-col gap-xs w-full"> <span class="text-xs text-muted-foreground font-strong"> flex-col @sm:flex-row — stacks on a narrow container, rows out on a wide one. Expand to see it. </span> <div class="flex flex-col @sm:flex-row gap-md w-full"> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-md text-center text-sm font-strong" > Sidebar </div> <div class="flex-1 bg-muted text-muted-foreground rounded-md p-md text-center text-sm font-strong" > Content </div> <div class="flex-1 bg-muted text-muted-foreground rounded-md p-md text-center text-sm font-strong" > Aside </div> </div></div>