En este artículo vamos a abordar una de las herramientas importantes que ofrece Tailwind CSS para la creación de componentes reutilizables, la directiva @apply, que aporta sencillez a la hora de aplicar estilo en ciertos elementos de diseño, que se van a usar en repetidas ocasiones a lo largo de todo un sitio web.

Como he dicho, lo que me parece horrible de los frameworks de diseño es el uso abusivo de clases en el HTML. Este detalle, aparte de echar por tierra el paradigma de separación de contenido y presentación, representa un problema serio cuando repetimos código constantemente.

Imagina que tienes 8 clases para definir un botón, o un encabezamiento, que has usado repetidas veces a lo largo de todo el sitio. ¿Qué pasaría si deseas cambiar esos componentes a lo largo de todo el sitio web?

Por eso existen las clases CSS, justamente para evitar que tengas que repetir dos veces una declaración de estilos, sin embargo, los frameworks CSS basados en "utility first" no aportan mucho en lo que respecta a reusabilidad de los componentes. En el caso de Tailwind CSS esta situación se ha solucionado de manera estupenga por medio de @apply, una directiva que permite englobar una serie de clases de utilidad bajo un mismo nombre, de modo que podamos usar eas clases para poder definir los estilos de nuestros componentes reutilizables.

Problema de la repetición de clases

Si observas el código HTML de ejemplos abordados anteriormente en el Manual de Tailwind observarás que habíamos definido un enlace con aspecto de botón usando todas estas estas clases:

 <a href="#" class="bg-blue-600 text-white px-4 py-2 font-bold uppercase rounded-xl tracking-wider">Entrar</a>

Gracias a esas clases conseguimos realizar un sencillo botón. Como imaginarás, es un estilo que pensamos repetir con frecuencia a lo largo de todo el sitio web. Sería un incordio tener que escribir todas esas clases, una a una, en nuestro HTML cada vez que queremos usar ese componente ¿no?.

Pero es más, como habíamos hecho ver, si por cualquier motivo se decide cambiar el botón, el color de todos los botones, o el tamaño del texto, tendrás que ir cambiando las clases por todo tu HTML, una y otra vez, por todo lugar donde hayas repetido el código. Creo que esto acabaría llevándonos a una experiencia de desarrollo poco amistosa.

Cómo solucionar la componetización con @apply

Usando @apply conseguimos solucionar el problema planteado de una manera sencilla. Podemos definir un código CSS como el siguiente para conseguir una clase CSS que tenga estos mismos estilos.

@tailwind base; 
@tailwind components;

.button {
    @apply bg-blue-600 text-white px-4 py-2 font-bold uppercase rounded-xl tracking-wider;
}

@tailwind utilities;

Nuestra clase se llama .button y tiene exactamente las mismas clases que las indicadas en el enlace anterior.

Gracias a esta definición ahora el botón lo podemos expresar con una única clase.

<a href="#" class="button">Entrar</a>

Ahora, si necesito cambiar el botón más adelante, solamente tendré que hacerlo en un único sitio!!

Organizar correctamente el código CSS basado en Tailwind

Es importante que tus clases, en las que usas @apply, se coloquen entre "@tailwind components" y "@tailwind utilities", ya que así tendrás una ventaja importante, que es la de sobrescribir el CSS por medio de las clases de utilidad.

Imagina que ahora deseas que determinado botón tenga un padding superior hacia la derecha y la izquierda. Sería simplemente asignarle la correspondiente clase de TailWind.

<a href="#" class="button">Entrar</a>
<a href="#" class="button px-8">Entrar</a>

Tenemos dos botones. El segundo tiene un padding diferente. Hemos reutilizado la clase "button" pero es perfectamente personalizable, dado que la definición de @apply la hemos colocado antes que la definición de "@tailwind utilities", que tomará precedencia gracias a la cascada del CSS.

Crear especializaciones de los componentes

También puede ocurrir que cierto botón tenga un color especial. Puedes tener botones verdes que expresen acciones de un tipo y rojos que expresen acciones peligrosas. En estos casos en los que quieres reutilizar el código del botón y hacer ciertas personalizaciones, puedes ir a una estrategia como esta:

.button {
    @apply px-4 py-2 font-bold uppercase rounded-xl tracking-wider;
}
.button-blue {
    @apply bg-blue-600 text-white;
}
.button-green {
    @apply bg-green-200 text-gray-800;
}

Hemos definido una clase "button" para el botón, con los estilos comunes a todos los botones, y una clase "button-green" y "button-blue" para dos tipos de botones en el sitio web. Vaya, es más o menos lo mismo que harías con tus declaraciones normales en CSS.

@apply aplica a todas las variantes de clases

No hemos hablado todavía de las variantes de Tailwind CSS (variants), que nos sirven para aplicar estilos para un determinado estado de los componentes, como por ejemplo "hover" o "focus", pero también para diseño responsive.

Este es un tema que tocaremos dentro de poco, pero para hacernos una idea, este estilo permite una caja sombreada, que cuando pasamos el ratón por encima cambia su borde y se levanta el sombreado.

 <div class="p-4 border border-gray-200 rounded shadow hover:border-gray-300 hover:shadow-md">Este elemento tiene un hover</div>

Ahora podemos componetizar este elemento con @apply de esta manera:

@apply {
    p-4 border border-gray-200 rounded shadow hover:border-gray-300 hover:shadow-md; 
}

Tailwind 2.0 en adelante, acepta cualquier tipo de variante en la directiva @apply, lo que nos permite una declaración sencilla de componentes complejos.

Nota: Si ves tutoriales en Internet que te dicen que esto no es posible, es que están desactualizados y abordan la versión 1.x de Tailwind CSS.

Conclusión @apply en TailwindCSS

Hemos visto cómo trabajar con la directiva @apply para mitigar la principal desventaja de los frameworks CSS para diseño web, que es la aplicación masiva de clases en los elementos para producir estilos determinados. Gracias a que Tailwind dispone de @apply podemos de una manera sencilla declarar estos conjuntos de clases, unificando bajo un componente con un nombre de clase personalizado.

Por cierto, @apply es una de varias directivas presentes en Tailwind. Otra es por ejemplo @tailwind que hemos visto nos sirve para volcar cierto CSS de una parte del framework en el CSS generado. Veremos otras directivas más adelante.

Pero antes de continuar con otras directivas, vamos a explicar algo tan importante y básico hoy en día como es el diseño responsive con Tailwind.