Tamaños y márgenes
Margin y padding
Utilizar padding es muy simple en Tailwind. Basta con utilizar el prefijo p-* con una medida numérica prestablecida (hasta 4 va en saltos de 0.5). Si queremos establecer padding solo a los lados (eje x) utilizaríamos px-*, y arriba y abajo con py-*. En cada uno de los 4 ejes también podemos personalizar con ps-* (start) pe-* (end), pt-* (top) y pb-* (bottom).
<main class="flex p-4 gap-4">
<div class="bg-red-300 p-6 self-start">
<div class="bg-red-500 h-16 w-16"></div>
</div>
<div class="bg-green-300 px-8 py-4 self-start">
<div class="bg-green-500 h-16 w-16"></div>
</div>
<div class="bg-blue-300 ps-8 pe-2 pt-4 pb-6 self-start">
<div class="bg-blue-500 h-16 w-16"></div>
</div>
</main>
El margen sigue las mismas reglas pero sustituyendo la letra p (padding) por m (margin). Ejemplos: m-4, mx-6, mt-2, ... Aunque en este caso podríamos poner margen negativo simplemente con el prefijo '-' delante de la clase (ejemplo: -mt-4).
<main class="p-4 gap-4 bg-amber-400 flex">
<div class="w-16 h-16 bg-red-500 m-4 self-start">
</div>
<div class="w-16 h-16 bg-green-500 -mt-12 self-start">
</div>
<div class="w-16 h-16 bg-blue-500 ms-8 mt-8 self-start">
</div>
</main>
Width y height
Para establecer el ancho o alto de un elemento utilizamos las clases prefijadas por w-* y h-* respectivamente. Si queremos establecer el ancho o alto mínimo usaríamos min-w-* y min-h-*, y para el máximo utilizamos max-w-* y max-h-*.
Además de las medidas numéricas prestablecidas que vimos para los márgenes, también permite establecer otro tipo de medidas relativas y absolutas como son las siguientes:
- Número: Valor relativo donde cada unidad representa 0.25 rem (4px por defecto). Ejemplo: w-12 (3 rem).
- Fracción: Representa la fracción del 100%. Ejemplo: w-1/4 (25%).
- sm, md, lg, xl, ...: Medidas prestablecidas que empiezan en 16rem (3xs) hasta 80rem (7xl).
- full: Equivale a 100%.
- screen: Equivale a 100vw.
- min-content, max-content, fit-content
Tenemos además la clase size, que aunque no admite los modificadores predefinidos sm, md, lg, xl, ... sí admite el resto de medidas. Esta clase sirve para establecer tanto el ancho como el alto del elemento de una sola vez.
<main class="p-4 w-fit bg-amber-400 flex flex-wrap gap-4">
<div class="w-1/2 h-12 bg-red-500 self-start">
</div>
<div class="size-16 bg-green-500 self-start">
</div>
<div class="min-w-xs max-w-md h-14 bg-blue-500 self-start">
</div>
</main>