Aplicar clases de utilidad a sólo una clase en TailwindCSS 🎨

O cómo procurar no llenar tu HTML de clases.

Tailwind es un framework CSS que tiene personas a favor y en contra. Este pequeño artículo no pretender ahondar en las razones de por qué esto sucede, pero sí aclarar algún aspecto que da mucha confusión en general.

Es que TailwindCSS me ensucia el HTML con muchas clases.

Esta es la razón más esgrimida que he leído cuando uno pregunta por qué no usar Tailwind. Podrás coincidir o no con este motivo, al final eso también se reduce a gustos estéticos o funcionales y formas de trabajar que cada persona tiene. No vengo a opinar sobre eso.

Vengo a explicar que podemos usar Tailwind sin utilizar muchas clases en nuestros elementos HTML. Vamos a verlo con un ejemplo. Para crear un botón podríamos hacer uso del siguiente HTML con estas clases de utilidad.

Un botón creado con clases de utilidad de Tailwind

¡Nuestro botón!

¿Qué tal? Un par de clases para un botón, ¿verdad? 😃

Bueno, que no haya pánico que esto se resuelve fácil. Tailwind tiene una directiva llamada @apply que lo que nos permite es aplicar estas clases de utilidad a una clase que nosotros creamos. En nuestro caso, sisi, adivinaron: la clase btn

Nuestro botón aplicando las clases de utilidad a nuestra propia clase

Y ahora sólo nos queda cambiar nuestro HTML, dejando la clase que creamos para ese botón:

¡Adiós HTML lleno de clases de utilidad!

Obteniendo el mismo resultado:

Mismo botón, menos clases en el HTML.

Espero les sea útil, ¡gracias por leer! 🧐
Saludos!

→ Ale
· https://alejandronarvaja.com