In v3 alpha, variant combinations like hover:before: aren't working

[MichaelAllenWarner]

What version of Tailwind CSS are you using?

v3.0.0-alpha.2

What build tool (or framework if it abstracts the build tool) are you using?

webpack 5

What version of Node.js are you using?

v16

What browser are you using?

Tested in Chrome and Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/9hQ7AdVmRy

Describe your issue

In v2 I often used variant-combinations like hover:before:, but in v3 the :before and :after pseudo-element variants don't seem to work in combination with pseudo-class variants.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

We introduced a new and more consistent addVariant API, which reverses the :hover and ::before pseudo's. This makes more sense in a lot of scenario's but it does introduce this breaking change.

To fix this right now, you can use before:hover: (flipped order). You can almost think of it as function calls before(hover(text-center)) where you evaluate from the inside out. E.g.: https://play.tailwindcss.com/2EjfqllUOh

However that might not be that convenient because it's a breaking change. On top of that, a selector that looks like this .class::before:hover will not work, since you can't hover over a before element.

That said, the linked PR #6018 will ensure that before and after pseudo elements are always at the end, regardless of the order you used them in.

Will keep this open for now until that PR gets merged.

[MichaelAllenWarner]

Yes, that new order is the opposite of what I'd expect (and of what I'd previously used in v2), but now that I know about the change it seems fine, and I think the PR allowing for some flexibility makes a lot of sense.