As much as I like Tailwind, I too does not understand the Tailwind-in-js thing for basic components likes buttons or checkboxes.
Why not just create a button component in whatever framework you are using with scoped styles. This just seems like unnecessary coupling to me.
Sure, the way I phrased it. I just think it's a bit weird to chose this "direction" for a button. No matter if you are creating something new och using something already made, like this.
The author may have a point. Some people will be: "well, just don't use those features then". But you are often not the only dev on a project. And some devs just love using the shiny new stuff even if it does not make any sense.
I personally find it hard to maintain "normal" CSS. Especially when things change a lot. That first version of a site might be great. But I honestly never seen an old site with good maintainable CSS, it seems developers just give up after a while.
That said, I don't think Tailwind is the solution for everything. Tailwind DX/Gimli is created with styling in the Shadow DOM, which works great. For more regular websites I would use Tailwind. But for more App like solutions I would preferably put the styling scoped within components.
I don't think learning something necessarily mean knowing lots of names/properties by heart. You should however have a good idea of what grid and flexbox can do for you and when to use them I think.
I personally have a hard time differentiating between properties such as justify-content / align-content / align-items / justify-items / justify-self and so on. To me those are just random words. Perhaps because English is not my first language, I don't know.
I really think it makes a huge difference to see a small icon describing what properties have been set and to see the difference by hover instead of just reading/editing raw CSS.
I'm working on my Tailwind CSS and Bootstrap DevTools browser extensions.