Sizing (Width & Height)
Control element dimensions effortlessly using Tailwind's width, height, min-width, max-width, min-height, and max-height utilities.
1. Width Utilities (`w-*`)
| Category | Class Name | CSS Equivalent |
|---|---|---|
| Fixed Width | w-64 | 16rem (256px) |
| Full Width | w-full | 100% |
| Screen Width | w-screen | 100vw |
| Fractional Widths | w-1/2, w-1/3, w-3/4 | 50%, 33.33%, 75% |
| Auto Width | w-auto | auto |
| Fit Content | w-fit | fit-content |
Live Visual Demo: Fractional Width Bars
w-1/4 (25%)
w-1/2 (50%)
w-3/4 (75%)
w-full (100%)
2. Max-Width Container Utilities (`max-w-*`)
Restricting text and card containers to readable widths is essential for modern responsive design:
| Class Name | Max Width | Typical Use Case |
|---|---|---|
max-w-sm | 24rem (384px) | Small Cards / Modals |
max-w-md | 28rem (448px) | Login Forms / Popups |
max-w-lg | 32rem (512px) | Feature Cards |
max-w-4xl | 56rem (896px) | Blog Post Body |
max-w-7xl | 80rem (1280px) | Full Page Layout Container |
3. Height Utilities (`h-*` & `min-h-*`)
<!-- Full Viewport Height Hero Section --> <div className="min-h-screen flex items-center justify-center bg-gray-900 text-white"> <h1 className="text-4xl font-bold">Centered Hero Content</h1> </div>
Next Up
Master Flexbox layouts, alignment, direction, wrapping, and flex-grow in Tailwind.
Next Lesson: Flexbox Layout →
