Las sombras dan sensación de elevación: qué tan "levantado" está un elemento respecto al fondo. Se usan con moderación — demasiadas sombras fuertes en una misma pantalla aplanan la jerarquía en vez de reforzarla.
Escala shadow-sm → shadow-2xl
Tailwind trae una escala predefinida de sombras, cada una pensada para un nivel de elevación distinto (tarjeta en reposo, tarjeta en hover, modal, etc).
→Regla práctica: shadow-sm/shadow para tarjetas en reposo, shadow-lg para hover o elementos flotantes, shadow-2xl para modales.
Sombra de color
Desde Tailwind 4, shadow-{color} tiñe la sombra en vez de usar el gris por defecto — útil para botones con un acento de marca.
<button class="shadow-lg shadow-amber-500/50 bg-amber-500">
Botón con sombra ámbar
</button>
Sombra interior (inset)
shadow-inner proyecta la sombra hacia adentro de la caja en vez de hacia afuera — típico para simular un campo de texto 'hundido' o un estado presionado.
shadow-inner
<div class="shadow-inner bg-stone-200">
Se ve 'hundido'
</div>
Ring: alternativa a shadow para bordes de foco
ring-{n} dibuja un contorno tipo 'anillo' fuera del elemento sin afectar el layout — Tailwind lo usa mucho para estados de foco accesibles en inputs y botones.
→A diferencia de outline nativo del navegador, ring se integra con el sistema de colores y opacidades de Tailwind.
→ring-offset-{n} agrega un espacio entre el elemento y el anillo, para que no se vea pegado.
drop-shadow (filter) para imágenes y SVG
shadow-* funciona sobre la caja rectangular del elemento. drop-shadow-* usa el filtro CSS drop-shadow, que sigue la silueta real del contenido — ideal para íconos SVG o PNGs con transparencia.