TailwindCSS or Theme-UI

I’ve been using TailwindCSS a lot lately. I like the fact that styles are contained within the HTML elements through classes. You can copy and paste an element styled with Tailwind and you can be certain it’ll look the same. Unlike other styling solutions, Tailwind doesn’t require the UI to be JS-based so that you can leverage CSS-in-JS and Babel transformations. But like any solution to a problem, it comes with caveats. In the case of Tailwind is the steep learning curve to learn the semantics of the classes. I find myself doing frequent back and forths between VSCode and the documentation.

Theme-UI solves the steep learning curve issue well. It introduces the notion of theming and responsive values without having to abandon the CSS language. Moreover, it’s built upon a theming specification defined by the same author. The downside though is that you need a JS-based UI and you can’t copy and paste styled HTML elements as you’d do with Tailwid.

My preferred option these days? My preference has been swinging, between the two, but these days I’m more inclined towards Theme-UI. The reason being is that I’d like to familiarize myself further with the CSS semantics and learn how to build great web UI experiences using as raw building blocks as possible. Copying and pasting styled components feel pretty much like solving code problems by pasting snippets from StackOverflow. You can create and solve things, without understanding the fundamentals of the solution.