Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioning the whole cascading part where you could never actually be sure just from glancing at the code what will be the resulting css. That second point is probably the most understated feature of Tailwind - you never have to wonder about the styling of an element again, because everything is right there in the classnames. The added benefit is that it basically forces you to write your UI code using components to prevent repetition - it encourages the best practice (note that this is where I think the OP went wrong when they asked “How to clean things up?” - the “@apply” keyword exists but it’s not meant to be overused as a replacement to proper code refactoring).

It’s not without its flaws - you have to learn a new syntax (which is in most cases very intoitive, e.g. “align-items: center” becomes “items-center”, “margin: 0” becomes “m-0” etc.) and it has its gotchas (for example it generates the css at build time by scanning your code and extracting classes you use to prevent generating unused css, which makes it impossible to construct a classname dynamically e.g. `gap-${value}`) but I take these issues over having to write CSS in any other way.

One point where I 100% do agree with the author though - you should first learn CSS before learning Tailwind. Not only because Tailwind could go away some day, but because this will give you a deeper understanding how and why stuff works.