TailwindCSS: Layout

Tailwind CSS proporciona un conjunto completo de herramientas de layout que te permiten crear diseños responsivos y complejos con facilidad. A diferencia de otros frameworks que imponen estructuras rígidas, Tailwind ofrece utilidades de bajo nivel que te dan control total sobre cómo organizar los elementos en la página.

El sistema de layout de Tailwind se basa en los modelos de caja flexibles (Flexbox) y de cuadrícula (Grid) de CSS, complementados con utilidades de posicionamiento, visualización y espaciado. Estas herramientas trabajan en armonía para permitirte crear prácticamente cualquier diseño que puedas imaginar.

Contenedores y ancho máximo

El primer bloque de construcción para cualquier layout es el contenedor. Tailwind incluye una clase container que centra tu contenido y establece un ancho máximo basado en el breakpoint actual:

<div class="container mx-auto px-4">
  <!-- Contenido centrado con padding horizontal -->
</div>

Por defecto, container establece estos anchos máximos:

• sm (640px): 640px
• md (768px): 768px
• lg (1024px): 1024px
• xl (1280px): 1280px
• 2xl (1536px): 1536px

Si prefieres que tu contenedor siempre ocupe el ancho completo hasta cierto breakpoint, puedes personalizar este comportamiento en tu archivo de configuración.

Control de ancho y altura

Las clases de dimensionamiento te permiten controlar con precisión el ancho y alto de tus elementos:

<div class="w-1/2 h-screen">
  <!-- Elemento con 50% de ancho y altura completa de la pantalla -->
</div>

Tailwind ofrece clases para anchos fijos, relativos y especiales:

• Fijos: w-0, w-px, w-0.5, w-1... hasta w-96
• Relativos: w-1/2, w-1/3, w-2/3, w-1/4...
• Especiales: w-full (100%), w-screen (ancho de la ventana), w-min (mínimo contenido), w-max (máximo contenido), w-fit (ajuste al contenido)
• Auto: w-auto

Las clases de altura (h-*) siguen el mismo patrón, e incluyen opciones como h-screen para ocupar toda la altura visible.

Espaciado y manejo de margenes

El espaciado entre elementos es crucial para un buen diseño. Tailwind proporciona clases de margen y padding con una escala coherente:

<div class="m-4">
  <!-- Margen de 1rem (16px) en todos los lados -->
</div>

<div class="mx-auto my-8">
  <!-- Centrado horizontal con margen vertical de 2rem -->
</div>

<div class="p-6">
  <!-- Padding de 1.5rem (24px) en todos los lados -->
</div>

La escala de espaciado predeterminada va desde 0 hasta 96, donde cada unidad generalmente representa 0.25rem (4px).

Flexbox: el pilar del diseño moderno

El modelo Flexbox es una de las herramientas más versátiles para crear layouts en Tailwind. Para activarlo, aplica la clase flex a un contenedor:

<div class="flex justify-between items-center">
  <div>Elemento izquierdo</div>
  <div>Elemento central</div>
  <div>Elemento derecho</div>
</div>

Las clases Flexbox principales incluyen:

Dirección del flujo:

• flex-row: Horizontal (predeterminado)
• flex-row-reverse: Horizontal invertido
• flex-col: Vertical
• flex-col-reverse: Vertical invertido

Alineación horizontal (eje principal):

• justify-start: Alinear al inicio
• justify-end: Alinear al final
• justify-center: Centrar
• justify-between: Espacio máximo entre elementos
• justify-around: Espacio igual alrededor
• justify-evenly: Espacio estrictamente igual

Alineación vertical (eje cruzado):

• items-start: Alinear al inicio
• items-end: Alinear al final
• items-center: Centrar
• items-baseline: Alinear por la línea base
• items-stretch: Estirar para llenar el contenedor

Espacio entre elementos:

• gap-{size}: Espacio uniforme entre elementos

Comportamiento de elementos flex hijos:

• flex-1: Ocupar todo el espacio disponible
• flex-auto: Crecer y reducirse según sea necesario
• flex-initial: Reducirse pero no crecer
• flex-none: No crecer ni reducirse
• grow, grow-0: Controlar el factor de crecimiento
• shrink, shrink-0: Controlar el factor de reducción

Grid: diseños bidimensionales potentes

El sistema Grid permite crear layouts bidimensionales complejos con mayor control que Flexbox:

<div class="grid grid-cols-3 gap-4">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
  <div>Elemento 4</div>
  <div>Elemento 5</div>
  <div class="col-span-2">Elemento 6 (ocupa 2 columnas)</div>
</div>

Las clases Grid principales incluyen:

Definición de la cuadrícula:

• grid: Activa el layout de cuadrícula
• grid-cols-{n}: Define el número de columnas (1-12)
• grid-rows-{n}: Define el número de filas (1-6)
• grid-flow-row, grid-flow-col: Define cómo se colocan los elementos
• gap-{size}: Espacio entre elementos (filas y columnas)
• gap-x-{size}, gap-y-{size}: Espacio horizontal o vertical

Posicionamiento de elementos:

• col-span-{n}: Cuántas columnas ocupa (1-12)
• col-start-{n}, col-end-{n}: Línea de inicio/fin de columna
• row-span-{n}: Cuántas filas ocupa (1-6)
• row-start-{n}, row-end-{n}: Línea de inicio/fin de fila
• auto-cols-{value}, auto-rows-{value}: Tamaño automático

Cuadrícula automática (Auto Grid)

Una potente característica del sistema Grid de Tailwind es la capacidad de crear cuadrículas adaptativas donde el número de columnas se ajusta automáticamente:

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <!-- Elementos que se reorganizan según el ancho de pantalla -->
</div>

También puedes crear cuadrículas de ancho automático con auto-fit o auto-fill mediante clases personalizadas.

Posicionamiento avanzado

Tailwind ofrece diversas clases de posicionamiento para control preciso:

<div class="relative h-32">
  <div class="absolute inset-0 bg-black opacity-50">
    <!-- Elemento que cubre completamente su contenedor -->
  </div>
  <div class="absolute top-4 right-4">
    <!-- Elemento posicionado en la esquina superior derecha -->
  </div>
</div>

Las clases de posicionamiento incluyen:

• static: Posicionamiento normal (predeterminado)
• relative: Posicionado relativamente a su posición normal
• absolute: Posicionado absolutamente respecto a su ancestro posicionado
• fixed: Posicionado respecto a la ventana
• sticky: Posicionado basado en el desplazamiento

Para controlar la ubicación de elementos posicionados:

• inset-{value}: Todos los lados
• inset-x-{value}, inset-y-{value}: Horizontal o vertical
• top-{value}, right-{value}, bottom-{value}, left-{value}: Lados individuales

Los valores pueden ser específicos (0, 1, 2, etc.) o fraccionales (1/2, 1/3, etc.).

Z-index y capas

El orden de apilamiento se controla mediante clases z-{index}:

<div class="relative">
  <div class="absolute inset-0 z-10 bg-red-500">Capa superior</div>
  <div class="absolute inset-0 z-0 bg-blue-500">Capa inferior</div>
</div>

Tailwind proporciona clases z-0 hasta z-50, así como z-auto.

Overflow: controlando el contenido desbordado

Para gestionar el contenido que excede las dimensiones de un contenedor:

<div class="overflow-hidden h-20">
  <!-- Contenido que excede 20 unidades de altura será recortado -->
</div>

<div class="overflow-y-auto h-40">
  <!-- Desbordamiento vertical con barra de desplazamiento -->
</div>

Las clases de overflow incluyen:

• overflow-auto: Agregar barras de desplazamiento cuando sea necesario
• overflow-hidden: Ocultar el contenido desbordado
• overflow-visible: Mostrar el contenido desbordado
• overflow-scroll: Siempre mostrar barras de desplazamiento
• overflow-x-{value}, overflow-y-{value}: Control por eje

Diseño responsivo: adaptación a diferentes tamaños

Una de las mayores fortalezas de Tailwind es su sistema responsivo. Puedes aplicar cualquier utilidad solo a ciertos tamaños de pantalla usando prefijos de breakpoint:

<div class="flex flex-col md:flex-row">
  <!-- Apilado en móvil, en fila en pantallas medianas y superiores -->
</div>

<div class="w-full lg:w-1/2 xl:w-1/3">
  <!-- Ancho completo, luego 50%, luego 33% según el tamaño -->
</div>

Los breakpoints predeterminados son:

• sm: 640px y superior
• md: 768px y superior
• lg: 1024px y superior
• xl: 1280px y superior
• 2xl: 1536px y superior

El enfoque es "móvil primero", lo que significa que las clases sin prefijo se aplican a todos los tamaños de pantalla, y los prefijos modifican ese comportamiento en pantallas más grandes.

Layouts específicos: tarjetas, tablas y más

Diseño de tarjetas

Las tarjetas son un patrón de diseño común que Tailwind facilita:

<div class="bg-white rounded-lg shadow-md overflow-hidden">
  <img src="imagen.jpg" alt="Encabezado" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="font-bold text-xl mb-2">Título de la tarjeta</h3>
    <p class="text-gray-700">Contenido de la tarjeta que puede ocupar varias líneas...</p>
    <div class="mt-4">
      <button class="bg-blue-500 text-white px-4 py-2 rounded">Acción</button>
    </div>
  </div>
</div>

Tablas responsivas

Las tablas pueden ser difíciles de hacer responsivas, pero Tailwind ayuda:

<div class="overflow-x-auto">
  <table class="min-w-full">
    <thead class="bg-gray-100">
      <tr>
        <th class="py-2 px-4 text-left">Encabezado 1</th>
        <th class="py-2 px-4 text-left">Encabezado 2</th>
        <th class="py-2 px-4 text-left">Encabezado 3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b">
        <td class="py-2 px-4">Dato 1</td>
        <td class="py-2 px-4">Dato 2</td>
        <td class="py-2 px-4">Dato 3</td>
      </tr>
      <!-- Más filas -->
    </tbody>
  </table>
</div>

Grids de auto-ajuste (repeat-fit y repeat-fill)

Para crear grids que se ajusten automáticamente al contenido, puedes personaliza