One gripe I have with tailwind, is overriding styles is difficult. The .text-blue style will only override .text-gray if it is declared later in the css document.

for example if the corresponding css file is this: .text-blue { color: blue; } .text-gray { color: gray; }

Then in your above example, both Button and CalloutButton will have gray text because .test-gray has higher specificity than .text-blue

The difference is that your website will be much larger and won't work without JavaScript.

And what about your :hover, ::before etc, where do you put those? (genuinely curious)

Those have utility classes: https://tailwindcss.com/docs/hover-focus-and-other-states

Tailwind supports those

https://tailwindcss.com/docs/hover-focus-and-other-states#ho...

https://tailwindcss.com/docs/hover-focus-and-other-states#be...