It's worth noting here that the issue isn't duplicated css, but duplicated html. Ideally, this is handled by some other templating / component library (e.g. React).
The idea is that if you have `bulletpoint__container`, that's going to be specific to this component only and hard to re-use in a different part of the application.
It seems like Tailwind's main value proposition is that it forces developers to select from a limited, pre-defined set of options in styling which can then be used as building blocks for components. It basically circumnavigates css entirely to the extent the page can be styled using Tailwind's options.
As far as I can tell, it's not really aimed at eliminating code-duplication per se. That should optimally be handled by whatever is generating your components.
Ok, the said article tells that it was not meant to be used in React or similar front-end stuff, but more in things like Rails.
But even disregarding that, you might want to have multiple places with lists, or other elements that I guess would not be 'big enough' to become components.
3 bullet points, each has to repeat the same thing:
<li class="flex items-start"> <span class="h-6 flex items-center sm:h-7">
<li class="flex items-start"> <span class="h-6 flex items-center sm:h-7">
<li class="flex items-start"> <span class="h-6 flex items-center sm:h-7">
vs classes:
<li class="bulletpoint__container"> <span class="bulletpoint">
<li class="bulletpoint__container"> <span class="bulletpoint">
<li class="bulletpoint__container"> <span class="bulletpoint">
And when you have this all around your project, and then you decided to change 1 thing. How Tailwind makes it easier here?
I tried to inspect the Tailwind styles in browser - sorry, but it looks like nightmare.