📐 Tailwind CSS - Sizing (Width, Height & Size)

Tailwind provides comprehensive sizing utilities for controlling the width and height of elements, including min/max constraints and the shorthand size utility.

Control element width with w-{value}:

• Fixed: w-4 (1rem), w-8, w-16, w-32, w-64
• Percentage: w-1/2, w-1/3, w-2/3, w-3/4
• Viewport: w-screen (100vw)
• Special: w-full (100%), w-auto, w-fit, w-min, w-max
• Arbitrary: w-[300px]

Min-Width (min-w-{value}):

• min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit
• Fixed: min-w-4, min-w-8, etc.

Max-Width (max-w-{value}):

• Breakpoints: max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl…max-w-7xl
• max-w-full, max-w-screen-xl, max-w-none
• Arbitrary: max-w-[600px]

Height (h-{value}):

• Fixed: h-4, h-8, h-16, h-32, h-64
• Percentage: h-1/2, h-full
• Viewport: h-screen, h-svh, h-dvh
• Special: h-auto, h-fit, h-min, h-max

Min-Height: min-h-0, min-h-full, min-h-screen, min-h-fit

Max-Height: max-h-full, max-h-screen, max-h-{size}

The size-{value} utility sets both width and height simultaneously. Available in Tailwind CSS v3.4+.

• size-4 – 1rem × 1rem
• size-8 – 2rem × 2rem
• size-full – 100% × 100%
• Arbitrary: size-[50px]