This week I’ve been playing with Tailwind, which is a “Utility-First CSS Framework for Rapid UI Development”. At first I was skeptical of the benefits of “utility-first” CSS but I’m pleased to say that after using Bootstrap 4 for a while (which contains some utility classes) and Tailwind for a week I’m convinced that utility-first CSS does, indeed, make sense.
The thing that helped tip me over the edge was a video that Adam shared of a talk at Scotland CSS by Eli Fitch entitled “Functional CSS at Scale: Clean & Composable UI on a massive app”. I highly recommend giving it a watch (it’s only ~20 mins).
A lightbulb moment for me while watching the talk was that, instead of always extracting components from the CSS itself, you can DRY up class repetition in the DOM by using a component system (like Vue components for example).