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)
Comentarios