Tailwindcss nos permite definir nuestras propias variantes a través de una directiva llamada @variant, que nos resulta muy útil cuando queremos aplicar estilos CSS condicionales a un estado del elemento, como hover, focus, etc.

Recuerda que el concepto de variante y las explicaciones sobre cómo utilizarlas, incluso cómo activarlas o desactivarlas para determinadas clases en la configuración de TailwindCSS ya la vimos en uno de los primeros artículos de este manual de Tailwind CSS.

En este artículo vamos a seguir ese mismo concepto, componiendo clases que se pueden combinar en múltiples variantes, para que las podamos aplicar en momentos muy concretos.

Ahora verás que la directiva @variant en sí es muy sencilla de utilizar. Por eso en este artículo vamos a trabajar desde un enfoque mayormente práctico, viendo una aplicación útil de estas variantes.

Una clase CSS para producir un sacudido de un elemento

Vamos a tener para nuestro ejercicio una clase llamada "shake", que básicamente lo que hace es crear una animación que permite sacudir un elemento de la página. Es decir, es una clase que, una vez aplicada sobre cualquier elemento, produce que éste se mueva de manera repetitiva.

Esta animación, para no tenerla que crear yo mismo, me he permitido la licencia de tomarla de una librería que tiene una lista de animaciones "shake" muy divertidas. Os la recomiendo, se llama CSShake.

Esa librería incluye varias clases para animación del movimiento de sacudida, pero yo he tomado únicamente uno de ellos, que produce un efecto más suave. Básicamente el código de esta animación sería el siguiente:

.shake {
  transform-origin: center center;
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-slow {
  2% {
    transform: translate(6px, -2px) rotate(3.5deg); }
  4% {
    transform: translate(5px, 8px) rotate(-0.5deg); }
  6% {
    transform: translate(6px, -3px) rotate(-2.5deg); }
  8% {
    transform: translate(4px, -2px) rotate(1.5deg); }
  10% {
    transform: translate(-6px, 8px) rotate(-1.5deg); }
  12% {
    transform: translate(-5px, 5px) rotate(1.5deg); }
  14% {
    transform: translate(4px, 10px) rotate(3.5deg); }
  16% {
    transform: translate(0px, 4px) rotate(1.5deg); }
  
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

Importante, para no aburriros con un código de animación muy largo he cortado los pasos. El código completo lo puedes obtener directamente visitando la mencionada librería CSShake o bien en el repositorio de código del proyecto Tailwind que estoy poniendo en GitHub para este manual, que estará enlazado en el final de este artículo.

Creación de las variantes

Ahora, dentro del código CSS de nuestro proyecto, vamos a crear las variantes de esta manera.

@variants focus, hover, active {
  
}

Dentro de las llaves colocamos la clase o clases que queramos que se generen con sus posibles variantes, en este caso focus, hover y active.

Para nuestro caso sería algo como esto:

@variants focus, hover, active {
  .shake {
    transform-origin: center center;
    animation-name: shake-slow;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}

Date cuenta que la animación es la misma para todas las variantes, por lo que no es necesario que la englobes dentro de la directiva @variants.

En nuestro caso tenemos una única clase que podemos hacer con sus variantes, pero podríamos haber generado varios tipos de clases de sacudida combinadas con cada una de las variantes deseadas.

Ahora podríamos tener un elemento de la página que aparezca siempre en movimiento así:

<div class="shake">
  Me muevo!!
</div>

Si queremos que solamente se mueva cuando el ratón esté encima del elemento podríamos usar la variante "hover".

<div class="p-6 bg-red-300 hover:shake">
  Me muevo!!
</div>

Le he puesto un poco de color a la división para que sea un poco más divertida!

Si queremos que se mueva cuando tiene el foco, es mejor que usemos un enlace.

<a href="#" class="button button-blue focus:shake">Vamos!</a>

Si queremos que se mueva cuando hacemos clic encima del enlace, entonces colocamos la variante "active".

<a href="#" class="button button-blue active:shake">Vamos!</a>

Las variantes se crean en el orden en el que las declaras

Como nos advierten en la documentación, en el código CSS resultante, las variantes estarán creadas en el orden en el que las has especificado en la directiva @variants.

Por eso, ten en cuenta que los estilos de ciertas variantes pueden sobrescribirse cuando estemos aplicando variantes distintas.

Es importante que coloques por último las que deben tomar prioridad sobre las que están antes. Es decir, que por ejemplo la variante "focus" venga después de la variante "hover".

Conclusión

Gracias a la directiva @variant hemos podido enriquecer todavía más el framework, creando clases de utilidad que tienen diferentes alternativas en las que pueden ser aplicados.

Esto puede ser útil en diversas situaciones, ya que la cantidad de variantes del framework es muy amplia. Por ejemplo podemos tener un estilo definido en una clase, que aplicaremos cuando sea el primer elemento de un conjunto de hermanos (variante "first") o el último (variante "last"). Los límites los pone tu imaginación.