Clases de Utilidad Principales

Tailwind ofrece cientos de clases utilitarias organizadas en categorías. Entender estas utilidades centrales es esencial para construir cualquier layout.

Utilidades de Espaciado

Tailwind usa una escala de espaciado consistente basada en unidades rem:

<!-- Padding -->
<div class="p-4">Padding en todos los lados (1rem)</div>
<div class="px-4">Padding horizontal</div>
<div class="py-4">Padding vertical</div>
<div class="pt-4">Padding superior</div>
<div class="pr-4">Padding derecho</div>
<div class="pb-4">Padding inferior</div>
<div class="pl-4">Padding izquierdo</div>

<!-- Margin -->
<div class="m-4">Margen en todos los lados</div>
<div class="mx-auto">Centrar horizontalmente</div>
<div class="my-8">Margen vertical</div>
<div class="mt-4">Margen superior</div>
<div class="-mt-4">Margen superior negativo</div>

Escala de Espaciado

Clase	Valor
0	0px
1	0.25rem (4px)
2	0.5rem (8px)
4	1rem (16px)
6	1.5rem (24px)
8	2rem (32px)
12	3rem (48px)
16	4rem (64px)

Utilidades de Tamaño

<!-- Width -->
<div class="w-full">100% de ancho</div>
<div class="w-1/2">50% de ancho</div>
<div class="w-1/3">33.33% de ancho</div>
<div class="w-64">16rem de ancho</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">Ancho máximo mediano</div>
<div class="min-w-0">Ancho mínimo 0</div>

<!-- Height -->
<div class="h-full">100% de alto</div>
<div class="h-screen">100vh</div>
<div class="h-64">16rem de alto</div>
<div class="min-h-screen">Mínimo 100vh</div>

Utilidades Tipográficas

<!-- Tamaño de fuente -->
<p class="text-xs">Extra pequeño (0.75rem)</p>
<p class="text-sm">Pequeño (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Grande (1.125rem)</p>
<p class="text-xl">Extra grande (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>

<!-- Peso de fuente -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

<!-- Alineación de texto -->
<p class="text-left">Alineado a la izquierda</p>
<p class="text-center">Alineado al centro</p>
<p class="text-right">Alineado a la derecha</p>
<p class="text-justify">Texto justificado</p>

<!-- Altura de línea -->
<p class="leading-none">Sin altura de línea</p>
<p class="leading-tight">Ajustado (1.25)</p>
<p class="leading-normal">Normal (1.5)</p>
<p class="leading-relaxed">Relajado (1.625)</p>
<p class="leading-loose">Suave (2)</p>

Utilidades de Color

<!-- Colores de texto -->
<p class="text-black">Texto negro</p>
<p class="text-white">Texto blanco</p>
<p class="text-gray-500">Texto gris 500</p>
<p class="text-blue-600">Texto azul 600</p>
<p class="text-red-500">Texto rojo 500</p>

<!-- Colores de fondo -->
<div class="bg-white">Fondo blanco</div>
<div class="bg-gray-100">Fondo gris claro</div>
<div class="bg-blue-500">Fondo azul</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradiente</div>

<!-- Colores de borde -->
<div class="border border-gray-300">Borde gris</div>
<div class="border-2 border-blue-500">Borde azul</div>

Utilidades de Borde

<!-- Grosor del borde -->
<div class="border">Borde de 1px</div>
<div class="border-2">Borde de 2px</div>
<div class="border-4">Borde de 4px</div>
<div class="border-t">Solo borde superior</div>
<div class="border-b-2">Borde inferior de 2px</div>

<!-- Radio de borde -->
<div class="rounded">Radio pequeño (0.25rem)</div>
<div class="rounded-md">Radio medio (0.375rem)</div>
<div class="rounded-lg">Radio grande (0.5rem)</div>
<div class="rounded-xl">Radio XL (0.75rem)</div>
<div class="rounded-full">Radio completo (círculo)</div>
<div class="rounded-t-lg">Solo esquinas superiores</div>

Utilidades de Sombra

<div class="shadow-sm">Sombra pequeña</div>
<div class="shadow">Sombra por defecto</div>
<div class="shadow-md">Sombra media</div>
<div class="shadow-lg">Sombra grande</div>
<div class="shadow-xl">Sombra XL</div>
<div class="shadow-2xl">Sombra 2XL</div>
<div class="shadow-none">Sin sombra</div>

Ejemplo Práctico

<!-- Botón estilizado -->
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors">
  Click Me
</button>

<!-- Componente de tarjeta -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6">
  <h3 class="text-xl font-bold text-gray-900 mb-2">Card Title</h3>
  <p class="text-gray-600 leading-relaxed">
    This is a beautifully styled card using only Tailwind utility classes.
  </p>
</div>