07 · Dimensiones
w-{n} y h-{n} controlan ancho y alto. Tailwind mezcla una escala fija (rem), fracciones, y palabras clave (full, screen, auto, fit, min, max) para cubrir casi cualquier caso sin escribir CSS a mano.
w-64 es un valor fijo (16rem = 256px). w-1/2, w-1/3, w-2/3... son porcentajes relativos al padre.
<div class="w-64">w-64 (256px fijos)</div>
<div class="w-1/2">w-1/2 (50% del padre)</div>
<div class="w-1/3">w-1/3 (33.3% del padre)</div>w-full ocupa el 100% del padre. w-screen ocupa el ancho completo del viewport (ignora al padre). w-auto deja que el navegador decida según el contenido.
<div class="w-full">w-full (100% del padre)</div>w-screen puede causar overflow horizontal si el elemento no está en el borde de la página (por ejemplo, dentro de un contenedor con padding) — úsalo con cuidado.min-w-{n} evita que el elemento se achique más allá de cierto punto. max-w-{n} evita que crezca más allá de cierto punto — clave para que el texto no se estire infinito en pantallas anchas.
Un párrafo largo se ve mejor con un ancho máximo legible, en vez de estirarse por toda la pantalla disponible.
<p class="max-w-prose">
Un párrafo largo se ve mejor con un ancho máximo
legible, en vez de estirarse por toda la pantalla.
</p>max-w-prose limita el ancho a ~65 caracteres por línea, el punto dulce para legibilidad de texto corrido.Igual lógica que width pero en vertical. h-full requiere que el padre tenga una altura definida, o no tiene de qué ser el 100%.
<div class="h-32">h-32 (128px)</div>
<div class="h-full">h-full (100% del padre)</div>size-{n} es un atajo que aplica width y height con el mismo valor — perfecto para íconos, avatares o cualquier elemento cuadrado.
<!-- Antes: -->
<div class="w-10 h-10">...</div>
<!-- Con size-*: -->
<div class="size-10">...</div>aspect-{ratio} fija una proporción entre ancho y alto — el elemento ajusta su altura automáticamente según su ancho. Ideal para contenedores de imagen o video.
<div class="w-full aspect-video bg-stone-300">
16:9, la altura se calcula sola
</div>