Width and height set the content box size. Percentages resolve against the parent; fr units work inside grid.
When to use
Fixed-size thumbnails, full-width sections, aspect-ratio boxes, and constraining overflow.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Responsive centered column
w-full max-w-3xl mx-auto px-4Full width on small screens, capped on large ones, centered with auto margins, the standard prose/article shell.
Square thumbnail
size-16 shrink-0 rounded-lg object-coverEqual width and height with shrink-0 so flex doesn't squash avatars or icons.
Summary
- width and height set explicit dimensions. auto lets content decide; percentages need a defined parent size.
- min-width prevents flex items from shrinking below readable size; max-width caps line length for prose.
- In flex layouts, flex items default to min-width: auto which can prevent shrinking. Use min-w-0 to allow truncation.
- Aspect ratio often beats fixed height for media. Pair width with aspect-video or aspect-square instead of hard-coding height.
- Tailwind uses w-*, h-*, min-w-*, max-w-* with the spacing scale or arbitrary values for pixel-perfect control.