Tailwind is the weirdest thing I've ever ran across. It's basically inline CSS.

Personally, I write CSS this way:

1. Select based on cascaded semantic HTML elements; 2. Don't repeat yourself; 3. No unnecessary classnames; 4. No style-descriptions in classnames.

Only when you have troubles selecting an element based on its position in your DOM you should choose a classname. It should not be ".text-gray-500" (like Tailwind does) but it should be "p.author-role".

In my case the classname is semantically descriptive whereas Tailwind is not. In my case you just need to update the CSS and in the case of Tailwind you need to change your HTML and then probably also create a new CSS class.

But still, ideally, you'd simply select it like this:

The author name:

    figure.author figcaption h5 { ... }

The author role:

    figure.author figcaption h6 { ... }

And even the .author selector would be optional, depending on whether that figure elements needs custom styling that is exclusive to the author or not.