Thoughts on Utility-first CSS and Tailwind CSS

Utility-first CSS, lead by Tailwind CSS, goes almost directly against the initial designing premise of CSS. Yet it works very well, and is gaining popularity.

The premise of CSS is in its name: Cascading Style Sheet. It is responsible for styling; it is a sheet; it applies the styling in a cascading way. The cascading algorithm is quite complicated. You can read LogRocket's blog post about it.

Utility-first CSS breaks two of those. It still is responsible for styling, of course. But it is not a sheet, and it doesn't cascade. Utility-first CSS applies all styles as classes directly to the elements. It doesn't cascade because all rules are applied as classes. It doesn't use inheritance either.

Why?

Cascading makes CSS unpredictable. Hunting down exactly which rule is preventing your rule from working requires intimate knowledge of the cascading algorithm. While the algorithm is necessary to make the browsers apply the styles consistently, it is additional mental load for graphic or UI designers. When you are drawing, what you see is what you get. Getting rid of cascading makes styling on the web closer to that: what you see in the class list is what you get.

Being a separate sheet makes CSS unnecessarily detached. The design of user interface is three intertwining concerns: semantics, layout, and theme. The goal was that HTML handles the semantics, while CSS handles layout and theme. But in reality they are not separable. The semantics of the UI element determines both its layout and on which axes its theme can be customized.

If we look at all the GUI development kits before the Web, no one chose to separate layout and theme from semantics. In contrast, almost everyone chose "widget" as their central abstraction. A widget is an independent piece of UI semantics, together with its derived layout and theme options.

We are seeing the Web coming around to this, with React, Vue, and the Web Component standard. Riding on this wave, Utility-first CSS is integrating styling back into HTML, realizing that CSS classes are not the right place for abstraction.