I'm trying to figure out the best way of using TailwindCSS for WordPress theme development. I'm confused about the best way to style html output that you don't have easy control over like a plugin. Or for example a menu, how to style item states that WP provides useful classes to style like .current_page_item.
Previously I would typically dequeue plugin css and then add my own css rules applied using the css classes that the plugin outputs.
I was thinking I could do something similar using tailwinds @apply feature to apply a bunch of tailwind classes to an element using the plugins class name.
e.g.
.plugin-btn { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
or in the case of a menu:
.current_page_item { @apply text-red-500 hover:text-blue-500 }
This method seems a bit awkward with Tailwind v1.x as @apply didn't work with responsive class variants or pseudo class variants but v2 it seems @apply does work with these now.
Is this a good solution. What do other people do?