Sizing
Sizing utilities control width, height, and aspect ratios. All fixed sizes derive from the same mathematical scale as spacing: a base of 32px with a 2x multiplier. This ensures visual harmony between element sizes and the space around them.
Width
Set explicit widths using the size scale, or use relative and keyword values for flexible layouts:
Classes: .w-0, .w-xs, .w-sm, .w-md, .w-lg, .w-xl, .w-2xl
Also: .w-auto, .w-min, .w-max, .w-viewport
Classes: .w-1/2, .w-1/3, .w-2/3, .w-1/4, .w-3/4
Height
Height utilities mirror width, using the same size scale and relative values:
Classes: .h-0, .h-xs, .h-sm, .h-md, .h-lg, .h-xl, .h-2xl
Classes: .h-auto, .h-full, .h-fit, .h-min, .h-max, .h-viewport
Max and Min Constraints
Constrain element dimensions with maximum and minimum values. Useful for responsive layouts where elements should grow or shrink within bounds:
Scale values: .max-w-xs, .max-w-sm, .max-w-md, .max-w-lg, .max-w-xl, .max-w-2xl
Also: .max-w-none, .max-w-full, .max-w-prose
Classes: .min-w-0, .min-w-full, .min-w-fit, .min-w-min, .min-w-max
Classes: .max-h-none, .max-h-full, .max-h-fit
Classes: .min-h-0, .min-h-full, .min-h-fit, .min-h-min
Aspect Ratios
Control the proportional relationship between width and height. Set a width and let the aspect ratio determine the height automatically. This is the modern approach to responsive media containers:
.aspect-auto - intrinsic aspect ratio.aspect-square - 1:1 (squares, avatars).aspect-video - 16:9 (videos, thumbnails).aspect-4/3 - 4:3 (classic photos).aspect-3/2 - 3:2 (35mm photos).aspect-2/1 - 2:1 (panoramic).aspect-21/9 - 21:9 (ultrawide).aspect-golden - 1.618:1 (golden ratio)Combining Width and Aspect Ratio
The power of aspect ratios: set width, get proportional height. This pattern replaces the need for many explicit height values:
Same width, different proportions. No explicit height needed.
Viewport Units
For full-viewport layouts, use .w-viewport and .h-viewport. These set 100vw and 100vh respectively:
.w-viewport - full viewport width (100vw).h-viewport - full viewport height (100vh)Use sparingly. Most layouts should respond to container size, not viewport. These are appropriate for full-screen hero sections, modals, and app shells.
Why No Responsive Sizing Variants
Unlike spacing, sizing utilities intentionally omit md: and sm: responsive variants. Responsive layouts should be achieved through flexbox and grid, not by manually adjusting widths at breakpoints.
Instead of: .w-full .md:w-1/2 .sm:w-1/3
Use: .grid .grid-cols-fluid or .flex .flex-wrap
Grid and flexbox create truly responsive layouts that adapt to available space, not arbitrary breakpoints. This produces more robust, maintainable designs.