Capítulo 18 de 29
width/height and their min-*/max-* counterparts (plus the logical-property equivalents inline-size/block-size) all share one value grammar — spacing-scale numbers, fractions, viewport units, content-based keywords, and the --container-* scale for max-w-* — so learning the pattern once covers the whole sizing family.
Property × prefix matrix: every combination below accepts the same suffix set (unless noted).
| Property | Prefix |
|---|---|
width | w-* |
height | h-* |
min-width | min-w-* |
min-height | min-h-* |
max-width | max-w-* |
max-height | max-h-* |
inline-size (logical width) | inline-* |
block-size (logical height) | block-* |
min-inline-size/min-block-size | min-inline-*/min-block-* |
max-inline-size/max-block-size | max-inline-*/max-block-* |
width + height together | size-* |
Shared suffixes: -<number> → calc(var(--spacing) * <number>); -<fraction> → calc(<fraction> * 100%) (e.g. w-1/2, w-2/3); -px → 1px; -full → 100%; -screen → 100vw/100vh (axis-appropriate); -dvh/-dvw/-lvh/-lvw/-svh/-svw → dynamic/large/small viewport units (mobile-browser-chrome-aware sizing); -min/-max/-fit → min-content/max-content/fit-content; -lh → 1lh (one line-height unit); -(<custom-property>)/-[<value>] → arbitrary forms.
w-*/h-*/min-* also accept -auto (not meaningful for max-*, which uses -none instead).max-w-* (and max-inline-*/min-inline-*/min-w-* etc.) uniquely also accept the --container-* scale as named sizes: -3xs (16rem) through -7xl (80rem) — the same scale used by columns-*, basis-*, and container queries. This is the standard way to cap a content column's width (max-w-md, max-w-2xl, ...).
<article class="mx-auto max-w-2xl">...</article>
<section class="min-h-dvh flex items-center justify-center">...</section>
<img class="size-12 rounded-full" src="/avatar.jpg" />
max-w-* for a readable content column, dvh units to avoid mobile browser chrome cutting off a "full height" hero, and size-* as a shorthand for equal width/height.dvh/svh/lvh exist specifically because plain vh/screen misbehaves on mobile browsers whose UI chrome shows/hides on scroll — reach for min-h-dvh over min-h-screen for full-viewport mobile layouts.size-<n> replaces the common w-<n> h-<n> pair with one class.max-w-*/logical-inline family exposes the --container-* named scale — w-*/h-* don't have -md/-lg/etc. sizes, only numbers/fractions/keywords.min-*/max-* don't support auto/full interchangeably with w-*/h-* — max-* uses -none where w-*/h-* use -auto to mean "no constraint."aspect-ratio/object-fit are commonly paired with sizing utilities on media elements.--spacing multiplier for numeric values.--container-* scale used by max-w-* is the same one that defines @sm…@7xl container-query breakpoints.