Puedes aplicar opacidad directamente al color usando `/` y un valor.

Es la forma más rápida de suavizar fondos, bordes y texto sin crear colores nuevos en tu paleta.

<div class="bg-sky-500/15 border border-sky-500/30 text-white/90">
  Caja con transparencia
</div>

• Funciona con `bg-*`, `text-*`, `border-*`, `ring-*` y más.
• Ejemplos comunes: `bg-black/50`, `text-white/80`, `border-amber-400/20`.
• Es ideal para overlays, badges, estados hover suaves y bordes sutiles.

Cuando la escala normal no alcanza, puedes escribir valores arbitrarios entre corchetes.

Sirve para resolver casos específicos sin salir de Tailwind ni abrir un archivo CSS para una sola excepción.

<div class="w-[410px] top-[117px] bg-[#0f172a] grid-cols-[1fr_auto]">
  Valor personalizado
</div>

• Úsalo para medidas exactas, colores hex, templates de grid o cálculos.
• Ejemplos válidos: `rounded-[28px]`, `max-w-[72ch]`, `left-[calc(50%-12rem)]`.
• Conviene usarlo con criterio: si repites mucho el mismo valor, mejor subirlo a `@theme`.

Añade separación automática entre hijos directos sin poner margen a cada elemento.

Mantiene layouts más limpios y evita encadenar `mb-*` o `mr-*` manualmente en listas, stacks y grupos de botones.

<div class="space-y-4">
  <div class="rounded-lg bg-neutral-800 p-4">Bloque 1</div>
  <div class="rounded-lg bg-neutral-800 p-4">Bloque 2</div>
  <div class="rounded-lg bg-neutral-800 p-4">Bloque 3</div>
</div>

• Para vertical usa `space-y-*`; para horizontal usa `space-x-*`.
• Solo afecta hijos directos del contenedor.
• Es muy útil en listas, grupos de cards, formularios y stacks verticales.

Define ancho y alto con una sola utilidad.

Evita repetir `w-*` y `h-*` cuando ambos valores son iguales, especialmente en avatares, iconos o botones cuadrados.

<button class="size-12 rounded-full bg-gold-500 text-black">
  +
</button>

• `size-10` equivale a usar `w-10 h-10`.
• Va muy bien para avatares, iconos, loaders y botones flotantes.
• También puedes usar valores arbitrarios como `size-[72px]`.

Puedes encadenar variantes para controlar cuándo y cómo cambia un estilo.

Esto permite expresar interactividad y responsive en la misma clase sin escribir selectores complejos.

<button class="bg-slate-800 hover:bg-slate-700 md:hover:bg-sky-600">
  Acción
</button>

• Puedes combinar prefijos como `md:hover:` o `dark:focus:`.
• La regla se lee de izquierda a derecha: contexto + estado + utilidad.
• Es muy útil para adaptar interacciones según pantalla o tema.

Una combinación simple para centrar bloques sin complicarte.

Es uno de los patrones más repetidos en layouts y cards, y conviene memorizarlo desde el inicio.

<div class="max-w-xl mx-auto rounded-2xl bg-neutral-900 p-6">
  Contenido centrado
</div>

• `max-w-*` limita el ancho máximo.
• `mx-auto` reparte el margen horizontal automáticamente.
• Juntas forman una base muy útil para contenedores, modales y secciones de lectura.