> Manuales > Manual de TailwindCSS

En este artículo aprenderás a usar variantes en TailwindCSS que afectan a estilos de las pseudo-clases, como hover, focus, etc. Además verás cómo configurar Tailwind para que estén disponibles las variantes en las clases de utilidad que necesites.

Usar variantes en Tailwind para aplicar estilos a pseudo-clases CSS

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 ha variantes responsive como las que vimos en el artículo pasado.

Nota: Las pseudo-clases de CSS sirven para implementar estilos en situaciones como el hover, active, focus, etc. El funcionamiento de las variantes de pseudo-clases es muy similar al de las variantes de responsive design que vimos en el artículo anterior. Simplemente se coloca el nombre de la variante, seguido de dos puntos (:) y la clase de utilidad que queremos aplicar.

<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:

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.

Nota: Más adelante hablaremos de la optimización y sobre cómo reducir el número de clases generadas por Tailwind. De momento vamos a ver lo básico para agregar nuevas variantes y más adelante explicaremos más detalles sobre cómo mantener y personalizar tus clases generadas, además de cómo reducir el peso del código CSS de Tailwind con otros plugins de PostCSS.

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;
}

Nota: recuerda que este código deberías colocarlo en tu CSS antes de "@tailwind utilities; y que solamente sería necesario trabajar de esta manera en la versión primera del framework".

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual