Vamos a abordar un tema muy interesante dentro de TailwindCSS, que consiste en la aplicación de variantes, las cuales nos pueden dar muchas posibilidades de configuración del aspecto de los elementos. Lo cierto es que ya habíamos visto ejemplos de uso de variantes en el Manual de TailwindCSS, aunque solo por encima. Ahora vamos a abordar de manera más detallada el uso de variantes y explicaremos cómo configurar el framework para aceptar las variantes que vayamos a usar.

En Tailwind disponemos clases de utilidad para prácticamente todo lo que podamos imaginar. Estas clases de utilidad además tienen una gran cantidad de variantes, de modo que se puede definir el aspecto de un elemento y especificar estilos distinos que se aplicarán en ese mismo elemento, pero en el momento en el que el usuario ha colocado el ratón por encima, cuando el elemento tiene el foco de la aplicación, etc.

La mayoría de las variantes, se apoyan en las conocidas pseudo-clases de CSS. Son las que vamos a tratar ahora. Aunque también hay variantes responsive como las que vimos en el artículo pasado.

 <span class="hover:font-bold">Hover en negrita!</span>

El texto del span anterior se mostrará en negrita cuando el usuario pase el ratón por encima.

Ejemplo de uso de variantes hover, focus y active

Veamos el siguiente HTML, en el que aplicamos varias variantes a unos enlaces de una barra de navegación, para que tengan estilos aplicados a sus pseudo-clases.

<nav class="mt-4 bg-gray-200 shadow-lg">
  <ul class="flex">
    <li><a href="#" class="inline-block px-4 py-4 mr-1 font-semibold text-blue-500 hover:bg-gray-300 hover:text-blue-700 focus:font-bold focus:outline-none focus:bg-gray-500 focus:text-indigo-100 active:text-red-400">Productos</a></li>
    <li><a href="#" class="inline-block px-4 py-4 mr-1 font-semibold text-blue-500 hover:bg-gray-300 hover:text-blue-700 focus:font-bold focus:outline-none focus:bg-gray-500 focus:text-indigo-100 active:text-red-400">Contacto</a></li>
    <li><a href="#" class="inline-block px-4 py-4 mr-1 font-semibold text-blue-500 hover:bg-gray-300 hover:text-blue-700 focus:font-bold focus:outline-none focus:bg-gray-500 focus:text-indigo-100 active:text-red-400">Sobre</a></li>
  </ul> 
</nav>

Las variantes de pseudo-clases que estamos usando tienen la forma como hover:text-blue-700, focus:font-bold o active:text-red-400. Creo que son bastante auto-explicativas. Así conseguimos un comportamiento bastante interesante de los estilos definidos para este navegador, de una manera rápida y sencilla.

Aquí no obstante hay dos factores importantes que nos dan pie a aprender más cosas de Tailwind:

• Las variantes no siempre están instaladas en la configuración predeterminada. Por ejemplo, el caso de active:text-red-400 verás que no se aplica. Esto es porque el procesado predeterminado de Tailwind no la tiene en cuenta. Así que tendremos que aprender a configurar el framework para conseguir que exista esa clase.
• Recordar que Tailwind nos ofrece la directiva @apply para poder reutilizar estilos, algo que sería ideal aplicar en los enlaces de la barra de navegación. Si estás en Tailwind 1 tienes que tener en cuenta que la sintaxis varía un poco a lo que explicamos en el artículo de la directiva @apply. Luego lo veremos también.

Configurar las variantes que deseamos en Tailwind

Recuerda que Tailwind tiene un archivo de configuración que nos permite especificar el comportamiento del generador de CSS. La configuración inicial del framework crea una cantidad de clases de utilidad gigantesca, pero no están todas las variantes de las clases de utilidad.

Ese archivo lo generamos en el capítulo inicial de Tailwind, donde explicamos cómo instalar y comenzar a usar el framework. Dicho archivo se llama "tailwind.config.js" y deberías encontrarlo en la raíz del proyecto.

Dado que "active" no es una pseudo clase muy utilizada, el equipo de Tailwind ha decidido no incorporarla de manera predeterminada en el CSS generado. Para poder definir su existencia tenemos que especificarlo de manera explícita. Dentro de tailwind.config.js encontrarás una propiedad llamada "variants".

En ella colocamos todas las variantes que queremos que estén disponibles para cada clase del framework. Por ejemplo, nosotros queremos usar "active:text-red-400". Por lo tanto, tendremos que agregar la variante "active" a la clase del color de texto. Para ello usaremos un código como este:

variants: {
  textColor: ['responsive', 'hover', 'focus', 'active'],
},

Observarás que, además de 'active', hemos declarado que vamos a usar las variantes 'responsive', 'hover' y 'focus'. Esto es importante porque, en el momento que quieres agregar una variante, necesitas indicar toda la lista de variantes que vas a requerir aplicar a los colores de textos y no solo aquella en específico que quieres agregar.

Gracias a la declaración de estas variantes podrás pseudo-clases como md:text-blue-500, focus:font-bold outline-none, hover:text-blue-700, active:text-red-400 y cosas similares.

Variantes soportadas por Tailwind

Existen multitud de variantes soportadas por Tailwind que puedes ver listadas en la página de la documentación de configuración de variantes. Algunas de ellas, aparte de las que ya hemos visto, son "first", "last", "odd", "even", "visited"...

Además puedes instalar o crear tú mismo plugins de Tailwind que eventualmente puedan crear otras variantes que añadir en el framework.

Configurar estilos con @apply para pseudo-clases de CSS

Actualmente, desde el lanzamiento de Tailwind 2, es posible aplicar variantes también en la directiva @apply sin ninguna restricción, más allá que estén activadas en la configuración, tal como acabamos de decir.

El código que podrás tener en una declaración @apply será el mismo que colocas como clases en el elemento.

.button {
    @apply block px-6 py-3 mb-3 text-lg tracking-wider text-center text-gray-800 uppercase bg-yellow-100 rounded hover:bg-white sm:mr-5 sm:text-xl;
}

Cómo aplicar variantes en la directiva @apply en TailwindCSS 1

Sin embargo, en Tailwind 1 no era posible hacer este uso tan cómodo de las variantes de pseudo-clases en las declaraciones @apply. Si estás comenzando con TailwindCSS seguramente esto te resultará indiferente, porque no tengas que trabajar con la versión 1 del framework, pero si estás en proyectos poco actualizados te podría interesar. Igualmente, si estás leyendo tutoriales poco actualizados en Internet probablemente te encuentres código como el que vamos a ver que, a día de hoy, sería innecesario.

Entonces, en Tailwind 1 debes tener en cuenta que la directiva @apply que vimos con anterioridad no acepta el uso de pseudo-clases como focus, hover, etc. En cambio tienes que usar un poco de selectores de CSS estándar.

El código te quedará así:

.navlink {
  @apply inline-block px-4 py-4 mr-1 font-semibold text-blue-500;
}
.navlink:hover {
  @apply bg-gray-300 text-blue-700; 
}
.navlink:focus {
  @apply font-bold outline-none bg-gray-500 text-indigo-100;
}
.navlink:active {
  @apply text-red-400; 
}

Como ves, en tu CSS estás definiendo la clase .navlink y a la vez diversas pseudo-clases para cada variante.

Ahora tus enlaces podrían tener este marcado mucho más limpio:

<nav class="mt-4 bg-gray-200 shadow-lg"> 
  <ul class="flex">
    <li><a href="#" class="navlink">Productos</a></li> <li><a href="#" class="navlink">Contacto</a></li> <li><a href="#" class="navlink">Sobre</a></li>
  </ul>
</nav>

Sin duda ha mejorado el código HTML ¿no? esta es una excelente ventaja de Tailwind con respecto a cualquier otro framework de CSS.

Pero un detalle más. Gracias a que has usado el CSS para definir las pseudo-clases, no es necesario que tengas configurada ninguna variante en especial para este caso. Es decir, dado que hastas definiendo a mano el CSS para .navlink:active, ya sería un poco innecesario hacer esa configuración para agregar la variante active que aprendimos en el pasado punto de este artículo, ya que en el HTML no estamos usando finalmente esa pseudo-clase.

Conclusión

Hemos visto cómo trabajar con variantes en el framework Tailwind para aplicar de una manera muy ágil y cómoda estilos basados en pseudo-clases de CSS, sin salirnos del HTML.

Hemos explicado que no todas las variantes están activadas para todas las clases de utilidad, por lo que es posible que tengas que realizar cambios en la configuración del framework para disponer de ellas.

Finalmente hemos mencionado que antes (Tailwind 1) era imposible usar variantes en las directivas @apply, por lo que teníamos que acudir a una fórmula distinta. Esto ya no ocurre en la versión actual de TailwindCSS.

En el siguiente artículo continuaremos aprendiendo la magia del framework, sacando partido a la personalización de Tailwind CSS.