Part 7: The Box Model: Width, Height & Sizing Utilities

Understanding sizing in Tailwind CSS is fundamental to building predictable layouts. Tailwind provides a rich set of width, height, and constraint utilities based on a consistent scale.

1. The Spacing Scale (4px Increments)

Tailwind's sizing scale is based on multiples of 0.25rem (4px): - w-1 = 0.25rem (4px) - w-2 = 0.5rem (8px) - w-4 = 1rem (16px) - w-8 = 2rem (32px) - w-16 = 4rem (64px) - w-64 = 16rem (256px)

2. Percentage & Fractional Sizing

Tailwind provides fractional classes based on 2, 3, 4, 5, 6, and 12-column divisions: - w-1/2: 50% - w-1/3: 33.333% - w-2/3: 66.666% - w-1/4: 25% - w-3/4: 75% - w-full: 100% - w-screen: 100vw

<div class="flex gap-4">
  <div class="w-1/3 bg-blue-200 p-4">33.3% Width</div>
  <div class="w-2/3 bg-blue-400 p-4 text-white">66.6% Width</div>
</div>

3. Height & Viewport Sizing

• h-full: 100% of parent height.
• h-screen: 100vh.
• min-h-screen: Sets min-height: 100vh (ideal for root page wrappers so footers stay at the bottom).

4. Size Shortcut (size-*)

Introduced in modern Tailwind, size-* sets both width and height simultaneously:

<!-- Instead of: w-12 h-12 -->
<img src="/avatar.png" class="size-12 rounded-full" alt="Avatar" />

Key Takeaways

• Sizing utilities scale in 4px increments (w-4 = 16px).
• Use fractional classes (w-1/2, w-3/4) for flexible layouts.
• Use size-* for square elements like avatars and icons.

In Part 8, we will explore Spacing Utilities: Margin, Padding & Space-Between!