Research
Understand what customers need.
Browse CSS
Responsive
Adapt layouts to the available viewport with mobile-first utilities.
Mobile-first breakpoints
| Class | Behavior |
|---|---|
No prefix | Applies at every width unless a later breakpoint overrides it. |
sm: | 40rem and wider (640px with a 16px initial font size). |
md: | 48rem and wider (768px with a 16px initial font size). |
lg: | 64rem and wider (1024px with a 16px initial font size). |
Supported responsive utilities
| Class | Behavior |
|---|---|
block | Supports sm:block, md:block, and lg:block. |
inline | Supports sm:inline, md:inline, and lg:inline. |
inline-block | Supports sm:inline-block, md:inline-block, and lg:inline-block. |
flex | Supports sm:flex, md:flex, and lg:flex. |
inline-flex | Supports sm:inline-flex, md:inline-flex, and lg:inline-flex. |
hidden | Supports sm:hidden, md:hidden, and lg:hidden. |
flex-row | Supports sm:flex-row, md:flex-row, and lg:flex-row. |
flex-col | Supports sm:flex-col, md:flex-col, and lg:flex-col. |
flex-wrap | Supports sm:flex-wrap, md:flex-wrap, and lg:flex-wrap. |
flex-nowrap | Supports sm:flex-nowrap, md:flex-nowrap, and lg:flex-nowrap. |
flex-1 | Supports sm:flex-1, md:flex-1, and lg:flex-1. |
flex-none | Supports sm:flex-none, md:flex-none, and lg:flex-none. |
shrink | Supports sm:shrink, md:shrink, and lg:shrink. |
col-auto | Supports sm:col-auto, md:col-auto, and lg:col-auto. |
col-span-full | Supports sm:col-span-full, md:col-span-full, and lg:col-span-full. |
truncate | Supports sm:truncate, md:truncate, and lg:truncate. |
whitespace-normal | Supports sm:whitespace-normal, md:whitespace-normal, and lg:whitespace-normal. |
whitespace-nowrap | Supports sm:whitespace-nowrap, md:whitespace-nowrap, and lg:whitespace-nowrap. |
break-words | Supports sm:break-words, md:break-words, and lg:break-words. |
wrap-anywhere | Supports sm:wrap-anywhere, md:wrap-anywhere, and lg:wrap-anywhere. |
line-clamp-none | Supports sm:line-clamp-none, md:line-clamp-none, and lg:line-clamp-none. |
grid-cols-1 | Supports sm:grid-cols-1, md:grid-cols-1, and lg:grid-cols-1. |
col-span-1 | Supports sm:col-span-1, md:col-span-1, and lg:col-span-1. |
grid-cols-2 | Supports sm:grid-cols-2, md:grid-cols-2, and lg:grid-cols-2. |
col-span-2 | Supports sm:col-span-2, md:col-span-2, and lg:col-span-2. |
grid-cols-3 | Supports sm:grid-cols-3, md:grid-cols-3, and lg:grid-cols-3. |
col-span-3 | Supports sm:col-span-3, md:col-span-3, and lg:col-span-3. |
grid-cols-4 | Supports sm:grid-cols-4, md:grid-cols-4, and lg:grid-cols-4. |
col-span-4 | Supports sm:col-span-4, md:col-span-4, and lg:col-span-4. |
grid-cols-5 | Supports sm:grid-cols-5, md:grid-cols-5, and lg:grid-cols-5. |
col-span-5 | Supports sm:col-span-5, md:col-span-5, and lg:col-span-5. |
grid-cols-6 | Supports sm:grid-cols-6, md:grid-cols-6, and lg:grid-cols-6. |
col-span-6 | Supports sm:col-span-6, md:col-span-6, and lg:col-span-6. |
line-clamp-1 | Supports sm:line-clamp-1, md:line-clamp-1, and lg:line-clamp-1. |
line-clamp-2 | Supports sm:line-clamp-2, md:line-clamp-2, and lg:line-clamp-2. |
line-clamp-3 | Supports sm:line-clamp-3, md:line-clamp-3, and lg:line-clamp-3. |
grid | Supports sm:grid, md:grid, and lg:grid. |
gap-0 | Supports sm:gap-0, md:gap-0, and lg:gap-0. |
gap-sm | Supports sm:gap-sm, md:gap-sm, and lg:gap-sm. |
gap-md | Supports sm:gap-md, md:gap-md, and lg:gap-md. |
gap-lg | Supports sm:gap-lg, md:gap-lg, and lg:gap-lg. |
gap-xl | Supports sm:gap-xl, md:gap-xl, and lg:gap-xl. |
gap-x-0 | Supports sm:gap-x-0, md:gap-x-0, and lg:gap-x-0. |
gap-x-sm | Supports sm:gap-x-sm, md:gap-x-sm, and lg:gap-x-sm. |
gap-x-md | Supports sm:gap-x-md, md:gap-x-md, and lg:gap-x-md. |
gap-x-lg | Supports sm:gap-x-lg, md:gap-x-lg, and lg:gap-x-lg. |
gap-x-xl | Supports sm:gap-x-xl, md:gap-x-xl, and lg:gap-x-xl. |
gap-y-0 | Supports sm:gap-y-0, md:gap-y-0, and lg:gap-y-0. |
gap-y-sm | Supports sm:gap-y-sm, md:gap-y-sm, and lg:gap-y-sm. |
gap-y-md | Supports sm:gap-y-md, md:gap-y-md, and lg:gap-y-md. |
gap-y-lg | Supports sm:gap-y-lg, md:gap-y-lg, and lg:gap-y-lg. |
gap-y-xl | Supports sm:gap-y-xl, md:gap-y-xl, and lg:gap-y-xl. |
items-start | Supports sm:items-start, md:items-start, and lg:items-start. |
items-center | Supports sm:items-center, md:items-center, and lg:items-center. |
items-end | Supports sm:items-end, md:items-end, and lg:items-end. |
items-stretch | Supports sm:items-stretch, md:items-stretch, and lg:items-stretch. |
items-baseline | Supports sm:items-baseline, md:items-baseline, and lg:items-baseline. |
justify-start | Supports sm:justify-start, md:justify-start, and lg:justify-start. |
justify-center | Supports sm:justify-center, md:justify-center, and lg:justify-center. |
justify-end | Supports sm:justify-end, md:justify-end, and lg:justify-end. |
justify-between | Supports sm:justify-between, md:justify-between, and lg:justify-between. |
justify-around | Supports sm:justify-around, md:justify-around, and lg:justify-around. |
justify-evenly | Supports sm:justify-evenly, md:justify-evenly, and lg:justify-evenly. |
self-start | Supports sm:self-start, md:self-start, and lg:self-start. |
self-center | Supports sm:self-center, md:self-center, and lg:self-center. |
self-end | Supports sm:self-end, md:self-end, and lg:self-end. |
self-stretch | Supports sm:self-stretch, md:self-stretch, and lg:self-stretch. |
text-start | Supports sm:text-start, md:text-start, and lg:text-start. |
text-center | Supports sm:text-center, md:text-center, and lg:text-center. |
text-end | Supports sm:text-end, md:text-end, and lg:text-end. |
w-full | Supports sm:w-full, md:w-full, and lg:w-full. |
w-auto | Supports sm:w-auto, md:w-auto, and lg:w-auto. |
w-fit | Supports sm:w-fit, md:w-fit, and lg:w-fit. |
min-w-0 | Supports sm:min-w-0, md:min-w-0, and lg:min-w-0. |
max-w-full | Supports sm:max-w-full, md:max-w-full, and lg:max-w-full. |
max-w-none | Supports sm:max-w-none, md:max-w-none, and lg:max-w-none. |
max-w-2xs | Supports sm:max-w-2xs, md:max-w-2xs, and lg:max-w-2xs. |
max-w-xs | Supports sm:max-w-xs, md:max-w-xs, and lg:max-w-xs. |
max-w-sm | Supports sm:max-w-sm, md:max-w-sm, and lg:max-w-sm. |
max-w-md | Supports sm:max-w-md, md:max-w-md, and lg:max-w-md. |
max-w-lg | Supports sm:max-w-lg, md:max-w-lg, and lg:max-w-lg. |
max-w-form | Supports sm:max-w-form, md:max-w-form, and lg:max-w-form. |
grow | Supports sm:grow, md:grow, and lg:grow. |
grow-0 | Supports sm:grow-0, md:grow-0, and lg:grow-0. |
shrink-0 | Supports sm:shrink-0, md:shrink-0, and lg:shrink-0. |
text-balance | Supports sm:text-balance, md:text-balance, and lg:text-balance. |
text-pretty | Supports sm:text-pretty, md:text-pretty, and lg:text-pretty. |
overflow-auto | Supports sm:overflow-auto, md:overflow-auto, and lg:overflow-auto. |
overflow-hidden | Supports sm:overflow-hidden, md:overflow-hidden, and lg:overflow-hidden. |
overflow-clip | Supports sm:overflow-clip, md:overflow-clip, and lg:overflow-clip. |
overflow-visible | Supports sm:overflow-visible, md:overflow-visible, and lg:overflow-visible. |
overflow-scroll | Supports sm:overflow-scroll, md:overflow-scroll, and lg:overflow-scroll. |
overflow-x-auto | Supports sm:overflow-x-auto, md:overflow-x-auto, and lg:overflow-x-auto. |
overflow-x-hidden | Supports sm:overflow-x-hidden, md:overflow-x-hidden, and lg:overflow-x-hidden. |
overflow-x-clip | Supports sm:overflow-x-clip, md:overflow-x-clip, and lg:overflow-x-clip. |
overflow-x-visible | Supports sm:overflow-x-visible, md:overflow-x-visible, and lg:overflow-x-visible. |
overflow-x-scroll | Supports sm:overflow-x-scroll, md:overflow-x-scroll, and lg:overflow-x-scroll. |
overflow-y-auto | Supports sm:overflow-y-auto, md:overflow-y-auto, and lg:overflow-y-auto. |
overflow-y-hidden | Supports sm:overflow-y-hidden, md:overflow-y-hidden, and lg:overflow-y-hidden. |
overflow-y-clip | Supports sm:overflow-y-clip, md:overflow-y-clip, and lg:overflow-y-clip. |
overflow-y-visible | Supports sm:overflow-y-visible, md:overflow-y-visible, and lg:overflow-y-visible. |
overflow-y-scroll | Supports sm:overflow-y-scroll, md:overflow-y-scroll, and lg:overflow-y-scroll. |
object-cover | Supports sm:object-cover, md:object-cover, and lg:object-cover. |
object-contain | Supports sm:object-contain, md:object-contain, and lg:object-contain. |
object-fill | Supports sm:object-fill, md:object-fill, and lg:object-fill. |
object-none | Supports sm:object-none, md:object-none, and lg:object-none. |
object-scale-down | Supports sm:object-scale-down, md:object-scale-down, and lg:object-scale-down. |
object-center | Supports sm:object-center, md:object-center, and lg:object-center. |
object-top | Supports sm:object-top, md:object-top, and lg:object-top. |
object-bottom | Supports sm:object-bottom, md:object-bottom, and lg:object-bottom. |
object-left | Supports sm:object-left, md:object-left, and lg:object-left. |
object-right | Supports sm:object-right, md:object-right, and lg:object-right. |
object-left-top | Supports sm:object-left-top, md:object-left-top, and lg:object-left-top. |
object-left-bottom | Supports sm:object-left-bottom, md:object-left-bottom, and lg:object-left-bottom. |
object-right-top | Supports sm:object-right-top, md:object-right-top, and lg:object-right-top. |
object-right-bottom | Supports sm:object-right-bottom, md:object-right-bottom, and lg:object-right-bottom. |
One layout, three sizes
Resize the page: one column below 40rem, two from 40rem, and three from 64rem. Breakpoints follow the viewport, not the width of this preview.
Design
Explore and test the experience.
Build
Bring the best ideas to life.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-md">
<article class="panel stack gap-sm">
<h3 class="m-0">
Research
</h3>
<p class="muted m-0">
Understand what customers need.
</p>
</article>
<article class="panel stack gap-sm">
<h3 class="m-0">
Design
</h3>
<p class="muted m-0">
Explore and test the experience.
</p>
</article>
<article class="panel stack gap-sm">
<h3 class="m-0">
Build
</h3>
<p class="muted m-0">
Bring the best ideas to life.
</p>
</article>
</div>Actions that adapt
The action fills the row on mobile and uses its natural width from 48rem. Content stays in the same reading and keyboard order.
Project files
Keep your team’s latest work together.
<div class="panel flex flex-col md:flex-row md:items-center md:justify-between gap-md">
<div class="stack gap-sm min-w-0">
<h3 class="m-0">
Project files
</h3>
<p class="muted m-0">
Keep your team’s latest work together.
</p>
</div>
<a class="btn secondary w-full md:w-auto shrink-0" href="/components/file-upload">
Upload Files
</a>
</div>Write the base layout first. Larger breakpoints override smaller ones regardless of class order. Variants are limited to the utilities listed here; arbitrary values, container queries, and custom breakpoint prefixes are not supplied.