Espaciado, sizing y contenedores

Espaciado, sizing y contenedores

El sistema de espaciado de Tailwind es uno de sus mayores aportes a la consistencia visual. En lugar de usar valores arbitrarios como padding: 13px, margin: 22px, te fuerza a trabajar dentro de una escala predefinida que garantiza armonía visual en toda la interfaz.

La escala de espaciado

Tailwind usa una escala basada en 0.25rem (4px con el font-size base de 16px del navegador):

Esta misma escala aplica para padding (p-*), margin (m-*), gap (gap-*), w-*, h-*, top-*, left-*, etc.

Extender la escala con @theme

Si necesitas valores fuera de la escala estándar:

@import "tailwindcss";

@theme {
  --spacing-18: 4.5rem;    /* p-18, m-18, gap-18 → 72px */
  --spacing-22: 5.5rem;    /* p-22 → 88px */
  --spacing-128: 32rem;    /* w-128, h-128 → 512px */
  --spacing-144: 36rem;    /* max-w-144 → 576px */
}

Padding y margin: referencia rápida

<!-- Padding -->
<div class="p-4">       Todos los lados = 16px</div>
<div class="px-6 py-3"> Horizontal 24px, vertical 12px</div>
<div class="pt-8">      Solo top = 32px</div>
<div class="pb-4">      Solo bottom = 16px</div>
<div class="pl-6">      Solo left = 24px</div>
<div class="pr-6">      Solo right = 24px</div>

<!-- Margin -->
<div class="m-4">       Todos los lados = 16px</div>
<div class="mx-auto">   Centrado horizontal automático</div>
<div class="mt-8 mb-4"> Top 32px, bottom 16px</div>

<!-- Margin negativo (muy útil para solapados) -->
<div class="-mt-4">     Margen top negativo = -16px</div>
<div class="-mx-4">     Margen horizontal negativo</div>

El utilitario space-y y space-x

En lugar de agregar margin-top a cada elemento individualmente, space-y-* lo hace automáticamente para todos los hijos excepto el primero:

<!-- Sin space-y: necesitas mt-* en cada elemento hijo -->
<div>
  <p>Párrafo 1</p>
  <p class="mt-4">Párrafo 2</p>
  <p class="mt-4">Párrafo 3</p>
</div>

<!-- Con space-y: mucho más limpio -->
<div class="space-y-4">
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
</div>

<!-- space-x para elementos horizontales -->
<nav class="flex space-x-6">
  <a href="/">Inicio</a>
  <a href="/cursos">Cursos</a>
  <a href="/blog">Blog</a>
</nav>

Sizing: width y height

Valores fijos de la escala

<!-- Usando la escala de Tailwind (misma que espaciado) -->
<div class="w-4 h-4">16px × 16px</div>
<div class="w-6 h-6">24px × 24px</div>
<div class="w-8 h-8">32px × 32px</div>
<div class="w-16 h-16">64px × 64px</div>
<div class="w-24 h-24">96px × 96px</div>
<div class="w-64 h-64">256px × 256px</div>

Porcentajes y fracciones

<div class="w-1/2">50% del padre</div>
<div class="w-1/3">33.33% del padre</div>
<div class="w-2/3">66.66% del padre</div>
<div class="w-1/4">25% del padre</div>
<div class="w-3/4">75% del padre</div>
<div class="w-full">100% del padre</div>

Valores de viewport

<div class="w-screen">100vw — ancho total del viewport</div>
<div class="h-screen">100vh — alto total del viewport</div>
<div class="h-dvh">100dvh — dynamic viewport height (mejor en móvil)</div>
<div class="h-svh">100svh — small viewport height</div>
<div class="h-lvh">100lvh — large viewport height</div>

Los valores dvh, svh, lvh son cruciales en móvil donde las barras del navegador pueden mostrar u ocultarse dinámicamente. h-dvh es la opción más robusta para secciones hero en móvil.

min-*, max-* constraints

<!-- min-width -->
<div class="min-w-0">min-width: 0 — imprescindible en flex para truncar</div>
<div class="min-w-full">min-width: 100%</div>

<!-- max-width -->
<div class="max-w-xs">24rem / 384px</div>
<div class="max-w-sm">24rem / 384px</div>
<div class="max-w-md">28rem / 448px</div>
<div class="max-w-lg">32rem / 512px</div>
<div class="max-w-xl">36rem / 576px</div>
<div class="max-w-2xl">42rem / 672px</div>
<div class="max-w-3xl">48rem / 768px</div>
<div class="max-w-4xl">56rem / 896px</div>
<div class="max-w-5xl">64rem / 1024px</div>
<div class="max-w-6xl">72rem / 1152px</div>
<div class="max-w-7xl">80rem / 1280px</div>
<div class="max-w-full">100%</div>
<div class="max-w-prose">65ch — ideal para texto legible</div>

<!-- min-height -->
<div class="min-h-screen">min-height: 100vh</div>
<div class="min-h-0">min-height: 0</div>

Valores de contenido

<div class="w-auto">auto — tamaño natural</div>
<div class="w-fit">fit-content — justo lo necesario</div>
<div class="w-min">min-content — el mínimo posible</div>
<div class="w-max">max-content — el máximo posible</div>

Aspect Ratio

aspect-ratio es una de las utilidades más prácticas para mantener proporciones:

<!-- Proporciones predefinidas -->
<div class="aspect-square">1:1</div>
<div class="aspect-video">16:9 — ideal para videos</div>
<div class="aspect-auto">auto (comportamiento del navegador)</div>

<!-- Proporciones personalizadas -->
<div class="aspect-[4/3]">4:3 — fotos clásicas</div>
<div class="aspect-[21/9]">21:9 — ultra wide cinematográfico</div>
<div class="aspect-[3/4]">3:4 — portrait/stories</div>

Patrón de embed responsivo

<!-- YouTube/Vimeo embed completamente responsivo -->
<div class="relative aspect-video rounded-xl overflow-hidden shadow-lg">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Título del video"
    class="absolute inset-0 w-full h-full"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Patrones de contenedor

El patrón más común: wrapper centrado

<!-- Contenido centrado con padding lateral -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Tu contenido aquí -->
</div>

Usando la clase container

<!-- container aplica max-width según el breakpoint actual -->
<div class="container mx-auto px-4">
  <!-- A 640px: max-width: 640px -->
  <!-- A 1024px: max-width: 1024px -->
  <!-- Etc. -->
</div>

Contenedor con breakpoint específico

<!-- Máximo ancho en xl, centrado, con padding adaptativo -->
<main class="max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-8 py-8 lg:py-16">
  <!-- content -->
</main>

Patrones de layout de página completa

<!-- Layout estándar de app: sidebar fija + contenido scrolleable -->
<div class="flex h-screen overflow-hidden">
  <aside class="w-64 flex-none bg-gray-900 overflow-y-auto">
    <!-- Sidebar -->
  </aside>
  <main class="flex-1 overflow-y-auto bg-gray-50">
    <div class="max-w-4xl mx-auto px-6 py-8">
      <!-- Contenido -->
    </div>
  </main>
</div>

<!-- Layout de marketing: secciones a ancho completo, contenido centrado -->
<body>
  <section class="bg-blue-600 py-24">
    <div class="max-w-6xl mx-auto px-4 text-center text-white">
      <h1 class="text-6xl font-extrabold">Hero Section</h1>
    </div>
  </section>

  <section class="bg-white py-20">
    <div class="max-w-6xl mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Feature cards -->
      </div>
    </div>
  </section>
</body>

Overflow y scroll

<!-- Overflow -->
<div class="overflow-hidden">  Oculta lo que se desborda</div>
<div class="overflow-auto">    Scroll cuando es necesario</div>
<div class="overflow-x-auto">  Scroll horizontal solamente</div>
<div class="overflow-y-auto">  Scroll vertical solamente</div>
<div class="overflow-scroll">  Scroll siempre visible</div>

<!-- Scroll snapping -->
<div class="overflow-x-auto snap-x snap-mandatory flex gap-4">
  <div class="snap-start flex-none w-80 h-48 bg-blue-100 rounded-xl"></div>
  <div class="snap-start flex-none w-80 h-48 bg-purple-100 rounded-xl"></div>
  <div class="snap-start flex-none w-80 h-48 bg-pink-100 rounded-xl"></div>
</div>

Resumen

El sistema de espaciado de Tailwind garantiza consistencia visual: usa la escala de 4px como base para todos los márgenes, paddings y tamaños. Los utilitarios clave son: space-y-* para stacks verticales, mx-auto para centrado, max-w-7xl para contenedores, aspect-video para proporciones de video, y min-h-dvh para secciones fullscreen en móvil.