Browse CSS
Sizing
Control widths and center content without fixed mobile dimensions.
Widths
| Class | Behavior |
|---|---|
w-full | 100% of the available width. |
w-auto | Automatic width. |
w-fit | Fit-content width. |
min-w-0 | Allow flex or grid content to shrink below its intrinsic width. |
max-w-full | Cap width at 100% of the containing block. |
max-w-none | Remove a maximum width. |
max-w-2xs | Maximum inline size: 10rem. |
max-w-xs | Maximum inline size: 14rem. |
max-w-sm | Maximum inline size: 18rem. |
max-w-md | Maximum inline size: 24rem. |
max-w-lg | Maximum inline size: 32rem. |
max-w-form | Maximum width: 48rem. |
Maximum sizes constrain a block without forcing it wider than a small screen. Combine w-full and a maximum-width utility when a block should fill available space up to a limit.
Height and flex sizing
| Class | Behavior |
|---|---|
h-auto | Content-driven height. |
h-full | 100% height; requires a definite parent height. |
min-h-0 | Allow a flex/grid child to shrink vertically. |
grow | Allow the item to grow and fill available flex space. |
grow-0 | Prevent the item from growing to fill extra flex space. |
shrink-0 | Prevent flex shrinking; use for icons or other fixed-size content. |
aspect-square | A 1:1 aspect ratio. |
aspect-video | A 16:9 aspect ratio. |
Aspect ratios work when at least one dimension is automatic. Keep text containers content-driven so text zoom and translations can expand them.
Centered content
A compact summary
Full width on a small screen, centered and constrained when there is more room.
<div class="panel stack w-full max-w-sm mx-auto p-md gap-sm">
<h3 class="m-0">A compact summary</h3>
<p class="muted m-0">Content remains free to grow vertically.</p>
</div>