This week I’ve been looking at a new CSS framework concept, “Utility First,” a concept proposed by Adam Wathan in his article: CSS Utility Classes and “Separation of Concerns”.
If we already had Tachyons, the appearance of Tailwind CSS and its way of working with PostCSS is a breath of fresh air.
Without a doubt, the possibility of rapid prototyping with Tailwind classes like:
<div class="text-gray-500 bg-grey-100 rounded px-5 py-2 font-mono">Hola</div>And then transform it into a class like
div.destacado {
@apply text-gray-500 bg-grey-100 rounded px-5 py-2 font-mono ;
}And use our new class.
<div class="destacado">Hola</div>At https://tailwindcss.com/docs/extracting-components we can see how to get the most out of this.
For a proof of concept, I’ve created a theme for https://gohugo.io from scratch only with Tailwind css, and using the content I already had.
Now I’m in the second part, which will be adding classes for proper display at different resolutions (AKA responsive), and later I’ll pass all the html to my own classes (not the raw list of Tailwind)