Width, Height & Aspect Ratio in Tailwind CSS
From the Tailwind CSS cheat sheet · Spacing & Sizing · verified Jul 2026
Width, Height & Aspect Ratio
Set element dimensions and aspect ratios.
html
<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-64">16rem (256px)</div>
<div class="max-w-lg">Max width large</div>
<div class="min-w-0">Min width zero</div>
<!-- Height -->
<div class="h-screen">Full viewport</div>
<div class="h-full">Full parent</div>
<div class="min-h-screen">At least full viewport</div>💡 h-dvh is the mobile-safe viewport height — accounts for browser chrome on phones
⚡ size-12 sets both width and height to 3rem — perfect for icons and avatars
📌 max-w-prose (65ch) is the ideal line length for readable body text
🟢 Use w-fit to make an element only as wide as its content
widthheightsizingaspect-ratio