Sizing (Width & Height)
Learn Tailwind's width and height utilities, including the fixed spacing scale, fractional widths like w-1/2, and min/max width constraints.
Introduction
Controlling exactly how wide or tall an element is comes up constantly — sizing an avatar, constraining a paragraph's readable width, or making a sidebar take up a fixed fraction of the screen. Tailwind covers all of this with w-* and h-* utilities, ranging from the same fixed spacing scale you saw with margin and padding, to fractional widths, to min/max constraints.
Fixed Width & Height
Just like spacing, fixed width and height utilities use Tailwind's numeric scale: w-{value} sets width, and h-{value} sets height, both based on the same 0.25rem increment.
<div class="w-16 h-16 bg-purple-500 rounded-full"></div><div class="w-32 h-8 bg-purple-300 mt-2"></div>Click Run to see what this code prints.
Fractional Widths
For layouts, Tailwind also provides fractional width utilities using the pattern w-{numerator}/{denominator}, which map to percentage-based widths — perfect for building columns without Flexbox or Grid math in your head.
| Class | Width |
|---|---|
| w-1/2 | 50% |
| w-1/3 / w-2/3 | 33.33% / 66.67% |
| w-1/4 / w-3/4 | 25% / 75% |
| w-1/5 | 20% |
| w-full | 100% |
<div class="flex gap-2"> <div class="w-1/3 bg-sky-200 p-4">1/3</div> <div class="w-2/3 bg-sky-400 p-4">2/3</div></div>Click Run to see what this code prints.
Full & Screen Sizing
Beyond the fixed scale and fractions, Tailwind offers a few special-purpose sizing keywords: w-full / h-full (100% of the parent), w-screen / h-screen (100% of the viewport), and w-auto / h-auto (the browser's natural sizing behavior).
<div class="h-screen w-full bg-slate-900 text-white flex items-center justify-center"> This section fills the entire viewport height</div>Click Run to see what this code prints.
Min/Max Width Utilities
Tailwind also provides min-w-* and max-w-* utilities. max-w-* is especially common for constraining paragraph or container width so text doesn't stretch uncomfortably wide on large screens, using both the numeric scale and a set of named sizes (max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, and so on up to max-w-7xl, plus max-w-prose for optimal reading width).
<p class="max-w-md mx-auto text-center"> This paragraph will never grow wider than max-w-md, no matter how wide its container is, and mx-auto centers it horizontally.</p>Click Run to see what this code prints.
Common Mistakes
- Using w-screen inside a container that already has padding or a scrollbar, which can cause unexpected horizontal overflow — w-full is usually the safer default.
- Forgetting that fractional widths (w-1/3, etc.) require a container with enough total width for the fractions to make visual sense.
- Reaching for arbitrary pixel widths before checking whether a named max-w-* size already fits the need.
- Mixing up min-w-* (a floor on shrinking) with max-w-* (a ceiling on growing) — they solve opposite problems.
Best Practices
- Use max-w-* with mx-auto to center content columns — one of the most common layout patterns in Tailwind projects.
- Prefer w-full over w-screen inside nested containers to avoid horizontal scrollbar issues from scrollbar width miscalculations.
- Reach for fractional widths (w-1/2, w-1/3) for simple column splits, and Flexbox/Grid utilities for more complex responsive layouts.
- Use named max-w-* sizes (max-w-md, max-w-2xl, etc.) for consistent content widths across a project rather than picking arbitrary values each time.
Frequently Asked Questions
w-full sets width to 100% of the parent element. w-screen sets width to 100% of the entire browser viewport (100vw), regardless of the parent's size — useful for full-bleed sections but riskier for scrollbar-related overflow.
They map directly to percentage widths (w-1/3 becomes width: 33.333333%), making it easy to build column-based layouts without manually calculating percentages.
Use max-w-* when you want an element to shrink on small screens but never grow past a certain width on large screens — ideal for centered content columns and readable paragraph widths.
Yes, and it's a common pattern: for example w-full max-w-md makes an element take the full width of its parent up to a maximum cap, then stop growing beyond that.
Key Takeaways
- Fixed w-* and h-* utilities use the same numeric spacing scale as margin and padding.
- Fractional widths like w-1/2 and w-1/3 map to percentage-based widths for simple column layouts.
- w-full/h-full size to the parent; w-screen/h-screen size to the full viewport.
- min-w-*/max-w-* set floor/ceiling constraints, with max-w-* commonly paired with mx-auto to center content columns.
Summary
You've now covered width and height sizing, including fixed values, fractions, full/screen sizing, and min/max constraints. Next, you'll move from sizing individual elements to arranging them together with Tailwind's Flexbox utilities.