A Thought on Utility Class styling

Alright that statement is only mainly true, and I understand that for many people it's probably closer to bat sh*t asinine. For the majority of my career as a web developer, I sort of look forward to whittling out layouts and designs in CSS once my HTML structure is in place. It's rewarding to see the UI come into view! And up to now my habit of adding styles in a greenfield project is to jump from the markup to the CSS and carry some of the semantics over with me. I should really know better, but some habits are sticky.

As a result I have been slow to embrace Tailwind CSS. It sometimes feels like it's just being pushed on me in every starter repo or youtube guide, reminiscent of Bootstrap everywhere. And since I'm fairly comfortable jumping in to write my own CSS, I haven't truly made the effort to wrap my noodle around it.

Because a lot of my recent projects have been strapped up with NextJS, Tailwinds has been coming along for the ride on most configs, and a lot of the learning materials I use assume it to be the entirety of the styling system. Which is actually helpful because I can begin to see the power and comprehensiveness of the library!

So I can't kid myself any longer . . . I'm missing out on some convenience and possibly some development speed by not taking the deep dive into Tailwind for all of my styles. My commitment this week is to continue my new UI building using Tailwind as the sole styling system.

I dove right into the documentation and was sold immediately by the excellent overview of the Utility-first fundamentals, and the handful of linked articles on Atomic CSS.

I will say, as one who came into a monster SMACSS library for a React-based UI system and had to digest it down to a more modular arrangement . . . the principal of building out based on core styling concepts rather than UI semantics just feels so much more appropriate.

OK time to get to work. I may write another post on how it's going once I spend a week or two slanging Tailwind all over the place.