Layout
Display y position
Tailwind tiene diferentes clases para gestionar la propiedad display cuyo nombre coincide con el valor de dicha propiedad (inline, block, flex, grid, ...). Una excepción sería la clase hidden que añade display: none, en lugar de visibility: hidden.
<div class="flex ...">
<div class="hidden ...">01</div>
<div>02</div>
<div>03</div>
</div>También podemos gestionar elementos flotantes con las clases prefijadas float-* y clear-*:
<article>
<img class="float-left ..." src="/img/snow-mountains.jpg" />
<img class="float-right ..." src="/img/green-mountains.jpg" />
<p class="clear-left ...">Maybe we can live without libraries...</p>
</article>La propiedad position se gestiona también con clases que representan los valores de la misma (static, relative, absolute, fixed, sticky):
<div class="relative ...">
<p>Relative parent</p>
<div class="absolute bottom-0 left-0 ...">
<p>Absolute child</p>
</div>
</div>Tablas
Tailwind contiene clases específicas para gestionar las propiedades de una tabla como:
- border-collapse y border-separate: Fusión de los bordes o separación.
- border-spacing-[medida]: Espaciado entre bordes
- table-auto y table-fixed: Si se ajusta el ancho de columnas a los contenidos o no.
- caption-top y caption-botton: Donde se sitúa el elemento caption.
<table class="border-collapse table-fixed">
<caption class="caption-top text-sm text-gray-500">
Tabla 3.1: Soy un caption
</caption>
<thead>
<tr class="bg-blue-50">
<th class="border border-gray-300 p-1">Columna 1</th>
<th class="border border-gray-300 p-1">Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 p-1">Dato de ejemplo 1</td>
<td class="border border-gray-300 p-1">Ejemplo 2</td>
</tr>
<tr>
<td class="border border-gray-300 p-1">Más datos</td>
<td class="border border-gray-300 p-1">Otro más</td>
</tr>
</tbody>
</table>
Flex
Hemos visto anteriormente que con la clase flex (o inline-flex), habilitamos un contenedor flex. Como es lógico, Tailwind nos ofrece muchas clases para gestionar las propiedades del contenedor y sus elementos.
Para gestionar la dirección del contenedor flex tenemos las clases flex-row (por defecto), flex-col, flex-row-reverse y flex-col-reverse.
<div class="flex flex-row gap-2 text-center">
<div class="basis-3xs bg-blue-600 text-white">01</div>
<div class="basis-xs bg-blue-600 text-white">02</div>
<div class="basis-2xl bg-blue-600 text-white">03</div>
<div class="basis-7xl bg-blue-600 text-white">04</div>
</div>
Para permitir que los elementos pasen a la siguiente fila (o columna en flex-col) cuando no hay suficiente espacio tenemos la propiedad flex-wrap, o flex-wrap-reverse.
<div class="flex flex-row gap-2 text-center flex-wrap">
<div class="basis-3xs bg-blue-600 text-white">01</div>
<div class="basis-3xs bg-blue-600 text-white">02</div>
<div class="basis-3xs bg-blue-600 text-white">03</div>
<div class="basis-3xs bg-blue-600 text-white">04</div>
</div>
Para permitir que los elementos crezcan (grow) o se hagan más pequeños (shrink) se pueden usar las clases grow y shrink o también clases que combinan ambas como flex-[número], flex-auto, flex-initial o flex-none.
<div class="flex flex-row gap-2 text-center flex-wrap">
<div class="w-16 bg-blue-600 text-white">01</div>
<div class="w-16 grow bg-blue-600 text-white">02</div> <!-- solo crece -->
<div class="w-16 flex-2 bg-blue-600 text-white">03</div> <!-- crece y decrece el doble de rápido -->
<div class="w-16 bg-blue-600 text-white">04</div>
</div>
La clase gap-[número] marca el espaciado entre los elementos tanto para flex como para grid.
Para alinear los elementos en el eje principal de un contenedor flex o grid utilizamos las clases con prefijo justify-*. Para alinearlos en el eje secundario utilizaríamos las clases con prefijo items-*. Para que un elemento se auto alinee en el eje secundario, utilizaríamos las clases con prefijo self-*.
<div class="flex flex-row justify-center items-center gap-4 border border-blue-700 text-center">
<div class="w-16 h-16 bg-blue-600 text-white">01</div>
<div class="w-16 h-12 bg-red-600 text-white self-end">02</div>
<div class="w-16 h-10 bg-green-600 text-white self-start">03</div>
<div class="w-16 h-20 bg-amber-600 text-white">04</div>
</div>
Grid
Una vez hemos creado un contenedor utilizando la clase grid, podemos aplicarle diferentes clases de Tailwind a él y sus hijos para gestionar todas las propiedades de un grid CSS. Una propiedad básica es grid-template-columns y en Tailwind las clases que controlan esto tienen el prefijo grid-cols-*.
<div class="grid grid-cols-2 gap-2">
<div class="bg-blue-600 text-white">01</div>
<div class="bg-red-600 text-white">02</div>
<div class="bg-green-600 text-white">03</div>
<div class="bg-amber-600 text-white">04</div>
</div>
Podemos personalizar el valor de esta propiedad (de muchas propiedades de hecho) utilizando corchetes y poniendo el valor personalizado que queramos.
<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-2">
<div class="bg-blue-600 text-white">01</div>
<div class="bg-red-600 text-white">02</div>
<div class="bg-green-600 text-white">03</div>
<div class="bg-amber-600 text-white">04</div>
</div>
Importante: Al establecer valores personalizados los espacios deben sustituirse por el caracter de guión bajo '_'.
Las clases que hemos visto para alinear los elementos también funcionan, aunque en un contenedor grid la cosa es algo más compleja:
- justify-items-*: Alinea sus hijos a nivel de columna (eje principal)
- items-*: Alinea sus hijos a nivel de fila (eje secundario)
- justify-self-*: Un elemento se alinea a nivel de columna (eje primario)
- self-*: Un elemento se alinea a nivel de fila (eje secundario)
También tenemos las clases place-items-* (a nivel de contenedor) y place-self-* (a nivel de elemento), que permiten establecer ambos ejes a la vez.
Por último, tenemos place-content-* que permite establecer las propiedades justify-content y align-content al mismo tiempo.
<div class="grid grid-cols-2 gap-4 place-content-center place-items-center h-48 border-2 border-gray-600">
<div class="w-16 h-16 bg-blue-600 text-white place-self-start">01</div>
<div class="w-16 h-12 bg-red-600 text-white">02</div>
<div class="w-16 h-10 bg-green-600 text-white">03</div>
<div class="w-16 h-20 bg-amber-600 text-white">04</div>
</div>
Otras propiedades de layout
Además de lo explicado anteriormente también tenemos clases para controlar el overflow, la posición de un elemento absolute o fixed, el z-index, aspect ratio, object position, o visibility entre otros.
Por ejemplo, así centraríamos una imagen para que ocupara siempre todo el ancho de la imagen con una relación de aspecto 16/9 (vídeo):
<img class="size-24 object-center object-cover aspect-video min-w-full" src="/img/mountain.png" />