Move Tailwind :hover, :focus-visible, and other state selectors to the stylesheet

[psirenny]

Goals

Tailwind's state selectors like :hover and :focus-visible don't work when inlined. Instead, those Tailwind classes should be moved to the stylesheet.

Background

I think Maizzle places those selectors in a <style /> element, but I have to verify.

Proposal

The state selectors should move to the <style /> element the same way that the media selectors are.

[gabrielmfern]

Hmm, yeah, I suppose this would be a nice-to-have. We didn't think of this, but the structure for the Tailwind component is certainly moving in a direction that would make this easier.

Would love to see PRs on this if you're interested in contributing!

[Sjoertjuh]

I tried implementing this, check out the PR here: #1864

[ayhanap]

GJ on the PR, I am migrating from Maizzle and this is such a needed thing to work with Tailwind. Testing with the canary 💯