Sizing
Sizing utilities for controlling the width, height, and max-width/max-height of elements.
Width
Control the width of an element using width utilities.
HTML
<div class="w-full">Full width (100%)</div>
<div class="w-1/2">Half width (50%)</div>
<div class="w-1/3">One-third width (33.333%)</div>
<div class="w-2/3">Two-thirds width (66.666%)</div>
<div class="w-1/4">One-quarter width (25%)</div>
<div class="w-3/4">Three-quarters width (75%)</div>
<div class="w-auto">Auto width</div>Fixed Width
Set a fixed width using spacing scale values.
HTML
<div class="w-0">0px</div>
<div class="w-px">1px</div>
<div class="w-0.5">2px</div>
<div class="w-1">4px</div>
<div class="w-2">8px</div>
<div class="w-4">16px</div>
<div class="w-8">32px</div>
<div class="w-12">48px</div>
<div class="w-16">64px</div>
<div class="w-24">96px</div>
<div class="w-32">128px</div>
<div class="w-48">192px</div>
<div class="w-64">256px</div>
<div class="w-96">384px</div>Max Width
Control the maximum width of an element.
HTML
<div class="max-w-xs">Max width 20rem (320px)</div>
<div class="max-w-sm">Max width 24rem (384px)</div>
<div class="max-w-md">Max width 28rem (448px)</div>
<div class="max-w-lg">Max width 32rem (512px)</div>
<div class="max-w-xl">Max width 36rem (576px)</div>
<div class="max-w-2xl">Max width 42rem (672px)</div>
<div class="max-w-3xl">Max width 48rem (768px)</div>
<div class="max-w-4xl">Max width 56rem (896px)</div>
<div class="max-w-5xl">Max width 64rem (1024px)</div>
<div class="max-w-6xl">Max width 72rem (1152px)</div>
<div class="max-w-7xl">Max width 80rem (1280px)</div>
<div class="max-w-full">Max width 100%</div>
<div class="max-w-none">No max width</div>Height
Control the height of an element using height utilities.
HTML
<div class="h-full">Full height (100%)</div>
<div class="h-screen">Full viewport height</div>
<div class="h-auto">Auto height</div>Fixed Height
Set a fixed height using spacing scale values.
HTML
<div class="h-0">0px</div>
<div class="h-px">1px</div>
<div class="h-0.5">2px</div>
<div class="h-1">4px</div>
<div class="h-2">8px</div>
<div class="h-4">16px</div>
<div class="h-8">32px</div>
<div class="h-12">48px</div>
<div class="h-16">64px</div>
<div class="h-24">96px</div>
<div class="h-32">128px</div>
<div class="h-48">192px</div>
<div class="h-64">256px</div>
<div class="h-96">384px</div>Max Height
Control the maximum height of an element.
HTML
<div class="max-h-full">Max height 100%</div>
<div class="max-h-screen">Max viewport height</div>
<div class="max-h-0">Max height 0px</div>
<div class="max-h-px">Max height 1px</div>
<div class="max-h-8">Max height 32px</div>
<div class="max-h-16">Max height 64px</div>
<div class="max-h-32">Max height 128px</div>
<div class="max-h-48">Max height 192px</div>
<div class="max-h-64">Max height 256px</div>
<div class="max-h-96">Max height 384px</div>Aspect Ratio
Control the aspect ratio of an element.
HTML
<div class="aspect-square">Square (1:1)</div>
<div class="aspect-video">Video (16:9)</div>
<div class="aspect-[4/3]">Custom (4:3)</div>
<div class="aspect-[21/9]">Custom (21:9)</div>