It's a lot like inline styles. The big advantage is that you create a design language with the helper classes, and then your devs are constrained to use it. No one can add a border radius of 11 if you only have utility classes for 8 and 16, or whatever. Historically you couldn't do that if you were using inline styles.

You could do it with a cascading approach, but if you're building a component based application (this is what Tailwind is really for) then you already have an abstraction for re-usability. Trying to layer another one on top usually results in a really difficult to reason about mess of interlacing components and style classes.

In short it's a way to use an inline-type styling approach, which is suitable for component based apps, without giving up the ability to constrain developers to a limited design language.

There are a TON of other benefits for utility classes over inline, but I think what I described is the biggest one (media queries, pseudo selectors, stylesheet caching for reduced page load, etc.)

> How did we go from removing <u> and <b> to calling it <div class="bold" an improvement?

You can still use <u> and <b> if you want to. Adding a utility bold class also works fine.