Probando Tailwind CSS

Probando Tailwind CSS

Esta semana he estado viendo un nuevo concepto de framework CSS, los “Utility First”, un concepto que planteaba Adam Wathan en su artículo: CSS Utility Classes and “Separation of Concerns”.

Si ya teníamos Tachyons, la aparición de Tailwind CSS y su forma de trabajar con PostCSS es toda una bocanada de aire fresco.

Sin lugar a dudas la posibilidad de un prototipado rápido con las clases del Tailwind del tipo:

<div class="text-gray-500  bg-grey-100 rounded px-5 py-2 font-mono">Hola</div>

Para luego transformarlo en una clase del tipo

 div.destacado {
   @apply text-gray-500  bg-grey-100 rounded px-5 py-2 font-mono ;
 }

Y utilizar nuestra nueva clase.

<div class="destacado">Hola</div>

En https://tailwindcss.com/docs/extracting-components podemos ver como sacarle mucho partido a esto.

Para una prueba de concepto, he creado un theme para https://gohugo.io desde cero sólo con Tailwind css, y utilizando los contenidos que ya tenía.

Ahora estoy en la segunda parte que será añadir las clases para una correcta visualización en diferentes resoluciones (AKA responsive) y a posteriori pasaré todo el html a clases propias (no la lista en bruto de Tailwind)

Relacionados