[atoav]

The first example on the official tailwind website right now starts like this:

  <div class="flex flex-col items-center p-7 rounded-2xl">...</div>

The problem with tailwind is that semantic HTML should be entirely free of styling decisions in the ideal case. That also goes for styling classes like flex flex-col etc.

The way I would do it is to give the HTML some semantic meaning:

  <section class="info-for-nerds">...</section>  
  

We can then decide how to treat section.info-for-nerds. Someone who reads the HTML immediately knows that this section is the bit that gives slightly too much information for nerds. That is what semantic means. The class adds meaning in a semantic sense, that helps to interpret the purpose of the element.

Then in CSS you would just style the semantic.info-for-nerds text fully with flex, flex-col, the whole shabang. If there are other info boxes that share style adding a general info-box class is probably a good idea. Again, this is semantic. I don't say red-box. I say what the box is intended to mean, not how it looks.

If you need the Infobox to look different in another context (or want to be sure your selector doesn't leak) you use the cascading bit of the language;

  .page-article>article>section.info-for-nerds { ... }
  
  .page-catalog>section.summary>section.info-for-nerds { ... }  
  

Notice btw. that I also prefer to use semantic HTML elements like section, article, main, aside over generic ones like div. Using these well may even mean you don't need any classes at all. If you have three nested divs classes are the only way to k ow which one is the article. If you have main containing article containing section, that may literally be all the info you need.