Tailwind overcomplicated approach

Here are the example of CSS classes on elements:

• hidden pro-content-overlay w-full h-full absolute top-0 left-0 z-[9999] bg-[#00000080]
• upgrade-button text-white hover:text-white focus:text-white focus:ring-0 px-4 py-2.5 inline-flex items-center rounded-md bg-[#ff9000] hover:bg-[#cf7500] font-semibold text-sm gap-2.5
• settings-tab w-full focus:outline-0 !text-black aria-selected:text-gray-600 aria-selected:bg-gray-100 hover:text-gray-600 hover:bg-gray-100 group rounded-md px-5 py-3 flex items-center text-sm font-medium cursor-pointer
• pro-badge cursor-pointer relative text-white text-[10px] py-[3px] px-[5px] leading-none ml-1.5
• settings-tab w-full focus:outline-0 !text-black aria-selected:text-gray-600 aria-selected:bg-gray-100 hover:text-gray-600 hover:bg-gray-100 group rounded-md px-5 py-3 flex items-center text-sm font-medium cursor-pointer
• border-gray-300 relative w-32 h-[135px] flex items-center justify-center cursor-pointer rounded-lg border bg-white shadow-sm focus:outline-none

And so on...

Ask yourself few questions:

1. Those classes describe the footer? Header? Or maybe a button? No. You can't determine it without looking at the rendered UI or potentially the HTML.
2. How does that make code easier to understand?
3. Passing arguments inside the CSS class name and propagating it across hundreds of different places won't make the code easier to maintain. Instead of making a change in one place, now you need to make it in a hundred other places.
4. Such an approach with adding a dozen classes makes the HTML just unnecessarily bigger in size. This impacts the HTML size and, hence, forces users to download and render more HTML.

Whoever decides to use Tailwind will add more unnecessary work in software development with practically no benefits.