Image for post
Image for post

Aplicar clases de utilidad a s贸lo una clase en TailwindCSS 馃帹

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

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.

Image for post
Image for post
Un bot贸n creado con clases de utilidad de Tailwind
Image for post
Image for post
隆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

Image for post
Image for post
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:

Image for post
Image for post
隆Adi贸s HTML lleno de clases de utilidad!

Obteniendo el mismo resultado:

Image for post
Image for post
Mismo bot贸n, menos clases en el HTML.

Espero les sea 煤til, 隆gracias por leer! 馃
Saludos!

鈫 Ale

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store