De las sombras CSS a Tailwind

Elevaciones comunes → shadow / shadow-lg. Sombras únicas → valores arbitrarios.

Las sombras suaves y habituales tienen equivalente directo: shadow para una elevación discreta y shadow-lg para una más marcada. Las sombras diseñadas a medida, con varias capas o color propio, se convierten en utilidades arbitrarias. En esos casos el nombre del token no dice nada útil, así que compara el resultado con el original en pantalla.

Sombras de escala

box-shadow suaves a menudo → shadow / shadow-md. Sombras de marca con muchos stops suelen ser shadow-[…].

Filtros

drop-shadow y filter no siempre mapean 1:1; lee la nota antes de forzar una utilidad.

Elevación honesta

Si el conversor pide revisión, conserva el valor exacto en brackets en vez de “el shadow más cercano”.

Probar

Abrir conversor

.example { display: flex; gap: 1rem; padding: 1rem; }

Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.