Utilidades esenciales de Tailwind

Las utilidades más importantes de Tailwind

Tailwind tiene cientos de clases, pero un subconjunto relativamente pequeño cubre el 90% de los casos de uso cotidianos. En esta lección aprenderás las utilidades fundamentales que usarás en prácticamente todos tus proyectos.

Espaciado: padding y margin

El sistema de espaciado de Tailwind usa una escala basada en múltiplos de 0.25rem (4px con font-size base de 16px). La nomenclatura es consistente para todas las propiedades de espaciado.

Padding

<!-- Todos los lados -->
<div class="p-0">0px</div>
<div class="p-1">4px</div>
<div class="p-2">8px</div>
<div class="p-4">16px</div>
<div class="p-6">24px</div>
<div class="p-8">32px</div>

<!-- Ejes -->
<div class="px-4">Horizontal: left + right = 16px</div>
<div class="py-6">Vertical: top + bottom = 24px</div>

<!-- Lados individuales -->
<div class="pt-4 pr-6 pb-4 pl-6">Equivalente a px-6 py-4</div>
<div class="ps-4 pe-4">Logical properties: inline-start, inline-end</div>

Margin

El sistema de margin sigue la misma nomenclatura con m-*:

<div class="m-4">Margen en todos los lados</div>
<div class="mx-auto">Centrado horizontal (muy usado)</div>
<div class="mx-auto max-w-6xl">Contenedor centrado con ancho máximo</div>
<div class="mt-12">Solo margen superior</div>
<div class="-mt-4">Margen negativo (¡funciona!)</div>

El -mt-4 es especialmente útil para solapados de elementos o correcciones finas de layout.

Ancho y alto

Width

<!-- Valores fijos de la escala -->
<div class="w-4">1rem</div>
<div class="w-16">4rem</div>
<div class="w-64">16rem</div>

<!-- Porcentajes -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-2/3">66.66%</div>

<!-- Unidades de viewport -->
<div class="w-screen">100vw</div>
<div class="w-dvw">100dvw (dynamic viewport)</div>

<!-- Valores especiales -->
<div class="w-auto">auto</div>
<div class="w-fit">fit-content</div>
<div class="w-min">min-content</div>
<div class="w-max">max-content</div>

Min-width y max-width

<div class="min-w-0">min-width: 0 (útil en flex para truncar texto)</div>
<div class="max-w-sm">max-width: 24rem</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="max-w-xl">max-width: 36rem</div>
<div class="max-w-4xl">max-width: 56rem</div>
<div class="max-w-screen-lg">max-width: 1024px</div>

Tipografía

Tamaño de fuente

<p class="text-xs">0.75rem / 12px</p>
<p class="text-sm">0.875rem / 14px</p>
<p class="text-base">1rem / 16px (base)</p>
<p class="text-lg">1.125rem / 18px</p>
<p class="text-xl">1.25rem / 20px</p>
<p class="text-2xl">1.5rem / 24px</p>
<p class="text-3xl">1.875rem / 30px</p>
<p class="text-4xl">2.25rem / 36px</p>
<p class="text-5xl">3rem / 48px</p>

Cada clase text-* también establece un line-height apropiado por defecto.

Peso, estilo y color

<p class="font-thin">Peso 100</p>
<p class="font-normal">Peso 400 (normal)</p>
<p class="font-medium">Peso 500</p>
<p class="font-semibold">Peso 600</p>
<p class="font-bold">Peso 700</p>
<p class="font-extrabold">Peso 800</p>

<p class="italic">Cursiva</p>
<p class="not-italic">Sin cursiva</p>
<p class="underline">Subrayado</p>
<p class="line-through">Tachado</p>
<p class="no-underline">Sin decoración</p>

<!-- Colores de texto -->
<p class="text-gray-900">Casi negro</p>
<p class="text-gray-500">Gris medio</p>
<p class="text-blue-600">Azul</p>
<p class="text-red-500">Rojo</p>

Alineación y overflow

<p class="text-left">Alineado a la izquierda</p>
<p class="text-center">Centrado</p>
<p class="text-right">Alineado a la derecha</p>
<p class="text-justify">Justificado</p>

<!-- Truncar texto con puntos suspensivos -->
<p class="truncate">Texto muy largo que se trunca...</p>
<p class="overflow-hidden text-ellipsis whitespace-nowrap">Igual que truncate</p>

<!-- Múltiples líneas con clamp -->
<p class="line-clamp-2">Texto que se corta después de 2 líneas sin importar su longitud real</p>
<p class="line-clamp-3">Texto que se corta después de 3 líneas</p>

Colores de fondo y bordes

Fondo

<div class="bg-white">Blanco</div>
<div class="bg-gray-100">Gris muy claro</div>
<div class="bg-blue-500">Azul estándar</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Gradiente</div>
<div class="bg-transparent">Transparente</div>

<!-- Opacidad del fondo -->
<div class="bg-black/50">Negro al 50% de opacidad</div>
<div class="bg-blue-500/75">Azul al 75%</div>

Bordes

<!-- Grosor -->
<div class="border">1px (default)</div>
<div class="border-2">2px</div>
<div class="border-4">4px</div>
<div class="border-0">Sin borde</div>

<!-- Lados específicos -->
<div class="border-t border-b">Solo top y bottom</div>
<div class="border-l-4">Solo left, 4px</div>

<!-- Color -->
<div class="border border-gray-200">Borde gris claro</div>
<div class="border-2 border-blue-500">Borde azul 2px</div>
<div class="border border-blue-500/50">Borde azul semitransparente</div>

<!-- Border radius -->
<div class="rounded">4px</div>
<div class="rounded-md">6px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-full">9999px (círculo/píldora)</div>

Sombras y visibilidad

<!-- Box shadows -->
<div class="shadow-sm">Sombra muy sutil</div>
<div class="shadow">Sombra base</div>
<div class="shadow-md">Sombra mediana</div>
<div class="shadow-lg">Sombra grande</div>
<div class="shadow-xl">Sombra extra grande</div>
<div class="shadow-none">Sin sombra</div>

<!-- Visibilidad y display -->
<div class="hidden">display: none</div>
<div class="block">display: block</div>
<div class="inline-block">display: inline-block</div>
<div class="invisible">visibility: hidden (ocupa espacio)</div>
<div class="opacity-50">50% de opacidad</div>

Variantes de estado

Las variantes son uno de los mayores poderes de Tailwind. Permiten aplicar utilidades condicionalmente según el estado del elemento.

hover:, focus: y active:

<a
  class="text-blue-600
         hover:text-blue-800 hover:underline
         focus-visible:outline-2 focus-visible:outline-blue-500
         active:text-blue-900
         transition-colors"
  href="/pagina"
>
  Enlace accesible
</a>

group: para efectos en padre-hijo

La variante group permite que los hijos reaccionen al estado del padre:

<div class="group flex items-center gap-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer">
  <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center
              group-hover:bg-blue-200 transition-colors">
    <span class="text-blue-600 group-hover:text-blue-800">★</span>
  </div>
  <div>
    <p class="font-medium text-gray-900 group-hover:text-blue-700 transition-colors">
      Nombre del elemento
    </p>
    <p class="text-sm text-gray-500">Descripción secundaria</p>
  </div>
</div>

peer: para estilos basados en hermanos

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="peer hidden" />
  <div
    class="w-5 h-5 border-2 border-gray-300 rounded
           peer-checked:bg-blue-500 peer-checked:border-blue-500
           transition-colors"
  >
    <svg class="w-3 h-3 text-white hidden peer-checked:block">...</svg>
  </div>
  <span class="text-gray-700">Acepto los términos</span>
</label>

Valores arbitrarios

Cuando la escala estándar no tiene el valor exacto que necesitas, Tailwind ofrece los valores arbitrarios con notación de corchetes:

<!-- Tamaños exactos -->
<div class="w-[350px] h-[420px]">Dimensiones exactas</div>
<div class="mt-[37px]">Margen exacto</div>
<div class="text-[1.375rem]">Tamaño de fuente personalizado</div>

<!-- Colores que no están en la paleta -->
<div class="bg-[#ff530f] text-[#1a0a00]">Colores de marca</div>

<!-- Valores CSS complejos -->
<div class="grid grid-cols-[200px_1fr_auto]">Grid con columnas mixtas</div>
<div class="bg-[url('/hero.jpg')] bg-cover bg-center">Imagen de fondo</div>
<div class="shadow-[0_8px_32px_rgba(0,0,0,0.12)]">Sombra personalizada</div>

<!-- Propiedades CSS que Tailwind no cubre directamente -->
<div class="[mask-image:linear-gradient(black,transparent)]">CSS nativo</div>
<div class="[content:'']">Pseudo-content</div>

Combinando utilidades: un componente completo

Veamos cómo se combinan todas estas utilidades en un componente real:

<!-- Tarjeta de artículo del blog -->
<article
  class="group bg-white rounded-2xl shadow-md hover:shadow-xl
         transition-shadow duration-300 overflow-hidden"
>
  <div class="relative overflow-hidden h-48">
    <img
      src="cover.jpg"
      alt="Portada del artículo"
      class="w-full h-full object-cover
             group-hover:scale-105 transition-transform duration-500"
    />
    <span
      class="absolute top-3 left-3 bg-blue-600 text-white text-xs
             font-semibold px-3 py-1 rounded-full"
    >
      Tutorial
    </span>
  </div>

  <div class="p-6">
    <p class="text-sm text-gray-500 mb-2">12 de enero de 2025</p>
    <h2
      class="text-xl font-bold text-gray-900 mb-3 line-clamp-2
             group-hover:text-blue-600 transition-colors"
    >
      Título del artículo del blog que puede ser largo
    </h2>
    <p class="text-gray-600 text-sm leading-relaxed line-clamp-3 mb-4">
      Descripción del artículo que se trunca automáticamente
      después de tres líneas para mantener la tarjeta uniforme.
    </p>
    <a
      href="/articulo"
      class="inline-flex items-center gap-1 text-blue-600 font-medium text-sm
             hover:gap-2 transition-all"
    >
      Leer más →
    </a>
  </div>
</article>

Resumen de clases más usadas

Con estas utilidades dominarás el 90% del diseño cotidiano con Tailwind. Las siguientes lecciones profundizan en Flexbox, Grid y diseño responsivo.