Sure in a 4 line example it's fine. On a real site with 5 different kinds of hero elements, with some styles in common but a lot of small variations and each with its own responsive behavior it's not so easy anymore. Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything.

I've been building sites the way you suggest for 20 years. I also had a negative knee jerk reaction to tailwind. But I had enough of an open mind to try it and now I have no interesting in going back.

This is so much easier to parse too. If you need more rigidity, add BEM on top then you're good to go.

You could also describe it with a comment <!-- hero -->, and/or deduce the structure from the actual html elment order.