Efectos y filtros
Sombreado
Para crear una sombra de caja (box-shadow) utilizamos las clases prefijadas con shadow-*. Podemos establecer un tamaño predefinido (shadow-xs, shadow-lg, ...) o un color de sombra (shadow-blue-700). Como ya vimos anteriormente, los colores pueden ser semitransparentes (shadow-red-600/40). También podemos controlar la opacidad por defecto con clases como shadow-lg/30 (por defecto es muy tenue).
<div class="flex gap-4">
<div class="size-16 bg-blue-600 shadow-lg"></div>
<div class="size-16 bg-blue-600 shadow-lg/50"></div>
<div class="size-16 bg-blue-600 shadow-lg shadow-blue-800/50"></div>
</div>
La sombra interna la podemos crear con clases similares a las anteriores pero prefijadas con inset-shadow-*.
<div class="flex gap-4">
<div class="size-16 inset-shadow-sm"></div>
<div class="size-16 inset-shadow-sm/50"></div>
<div class="size-16 inset-shadow-sm inset-shadow-blue-800/50"></div>
</div>
Se pueden establecer también sombras sólidas (parecido a la propiedad outline) con las clases ring-* y inset-ring-*.
<div class="flex gap-4">
<div class="size-16 border-2 border-gray-300 ring-2 ring-gray-500"></div>
<div class="size-16 border-2 border-gray-300 inset-ring-2 inset-ring-gray-500"></div>
<div class="size-16 border-2 border-gray-300 ring-2 ring-red-500/50"></div>
</div>
La sombra para el texto también se gestiona de una forma similar a las anteriores pero prefijada en este caso con text-shadow-*.
<p class="text-shadow-xs">Hola mundo</p>
<p class="text-shadow-lg">Hola mundo</p>
<p class="text-shadow-lg/40">Hola mundo</p>
<p class="text-shadow-lg text-blue-800 text-shadow-blue-800/50">Hola mundo</p>
<p class="bg-blue-400 text-blue-900 text-shadow-md text-shadow-sky-200">Hola mundo</p>
Opacidad
Para gestionar la opacidad de un elemento, utilizamos la clase opacity-*.
<div class="w-48 h-32 bg-[url(/road.webp)] bg-cover bg-center relative">
<div class="opacity-100 w-12 p-2 absolute top-2 left-2 bg-blue-600 rounded-xl text-center text-white">01</div>
<div class="opacity-75 w-12 p-2 absolute top-2 right-2 bg-blue-600 rounded-xl text-center text-white">01</div>
<div class="opacity-50 w-12 p-2 absolute bottom-2 left-2 bg-blue-600 rounded-xl text-center text-white">01</div>
<div class="opacity-25 w-12 p-2 absolute bottom-2 right-2 bg-blue-600 rounded-xl text-center text-white">01</div>
</div>
Transformaciones
En este apartado vamos a ver como aplicar transformaciones principalemente en 2D, tanto de rotación, traslación, escala o inclinación (skew).
Rotación
Para rotar un elemento utilizaremos una clase prefijada con rotate-* (positivo) o -rotate-* (negativo) seguida de los grados de rotación. Se pueden utilizar las clases prefijadas con origin-* para establecer el pivote a partir del cual se rota (por defecto el centro, origin-center).
<div class="flex gap-4">
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 rotate-45 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 -rotate-45 origin-top-left absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
</div>
Podemos rotar en los diferentes ejes utilizando clases como rotate-x-*, rotate-y-* y rotate-z-*.
<div class="flex gap-4">
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 rotate-y-70 rotate-x-35 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 rotate-x-50 rotate-y-45 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 rotate-x-50 rotate-z-45 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
</div>
Traslación
Para mover un elemento desde su posición original, utilizamos las clases prefijadas con translate-* (positivo) o -translate-* (negativo). Los valores prefijados son números o fracciones (relativas al 100%), o full para hacer un movimiento del 100%.
<div class="flex gap-4">
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 -translate-4 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 translate-4 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 translate-x-4 -translate-y-4 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
</div>
Escalado
Para el efecto de escalado de un elemento, tenemos las clases prefijadas con scale-*. Con las clases -scale-* generamos un efecto espejo.
<div class="flex gap-4">
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 scale-75 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 scale-125 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 -scale-y-100 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
</div>
Inclinación
Para aplicar efectos de inclinación o estirado a un elemento utilizamos las clases skew-*.
<div class="flex gap-4">
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 skew-12 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 skew-x-12 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
<div class="relative">
<div class="size-24 bg-gray-200"></div>
<div class="size-24 skew-y-12 absolute top-0 left-0 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
</div>
Filtros
Para aplicar filtros a un elemento podríamos utilizar el prefijo filter-* aunque solo sirve para valores personalizados (entre corchetes). Sin embargo, Tailwind ofrece clases con nombres asociados a cada tipo de filtro como desenfoque (blur), brillo (brightness), escala de grises (grayscale), etc.
Desenfoque (blur)
Para aplicar un efecto de desenfoque utilizamos clases prefijadas con blur-*.
<div class="flex gap-4">
<div class="size-16 blur-xs bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-16 blur-md bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-16 blur-xl bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Brillo
El efecto de brillo se aplica con las clases brightness-*.
<div class="flex gap-6">
<div class="size-16 brightness-75 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-16 brightness-125 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-16 brightness-200 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Contraste
El efecto de contraste se aplica con las clases contrast-*.
<div class="flex gap-6">
<div class="size-20 contrast-75 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 contrast-125 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 contrast-200 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Escala de grises (grayscale)
El efecto de escala de grises se aplica con las clases grayscale-*.
<div class="flex gap-6">
<div class="size-20 grayscale-25 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 grayscale-75 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 grayscale-100 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Rotación de color (hue rotate)
Para hacer rotaciones de color utilizaremos la clases hue-rotate-*.
<div class="flex gap-6">
<div class="size-20 hue-rotate-15 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 hue-rotate-90 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 hue-rotate-180 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Invertir colores
Para invertir los colores de una imagen usamos las clases invert-*.
<div class="flex gap-6">
<div class="size-20 invert-25 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 invert-75 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 invert-100 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Saturación
El efecto de saturación se aplica con las clases saturate-*.
<div class="flex gap-6">
<div class="size-20 saturate-50-25 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 saturate-100 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 saturate-200 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Sepia
El efecto de sepia se aplica con las clases sepia-*.
<div class="flex gap-6">
<div class="size-20 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 sepia-50 bg-[url(/road.webp)] bg-cover bg-center"></div>
<div class="size-20 sepia-100 bg-[url(/road.webp)] bg-cover bg-center"></div>
</div>
Sombra de contorno (drop-shadow)
En imágenes con fondo transparente (svg, webp, png), podemos aplicar una sombra que siga el contorno de la misma, y más adecuada que usar box-shadow. Para ello usamos las clases drop-shadow con reglas similares a la clase shadow que vimos anteriormente.
<div class="flex gap-4">
<div class="size-20 drop-shadow-lg bg-[url(/vite.svg)] bg-cover bg-center"></div>
<div class="size-20 drop-shadow-lg/40 bg-[url(/vite.svg)] bg-cover bg-center"></div>
<div class="size-20 drop-shadow-lg drop-shadow-purple-600/50 sepia-50 bg-[url(/vite.svg)] bg-cover bg-center"></div>
</div>
Filtro de fondo (backdrop)
El filtro de fondo (backdrop-filter) se aplica al contenido que hay detrás de un elemento en lugar de al propio elemento. Esto solo tiene sentido cuando el color de fondo del elemento es semitransparente.
<div class="flex p-4 w-fit gap-4 bg-[url(/road.webp)] bg-cover bg-center">
<div class="size-16 backdrop-blur-sm bg-white/20"></div>
<div class="size-16 backdrop-grayscale-100 bg-white/20"></div>
<div class="size-16 backdrop-invert-100 bg-white/20"></div>
</div>