Sibling selector (~) stopped working in Tailwind CSS v4

[MonaAghili]

In Tailwind CSS v3, I used the following selector to style a .rating-button if it had a hovered sibling after it:

[&_.rating-button:has(~.rating-button:hover)]:bg-red-500

Here ~ is used to check for following siblings.
This worked perfectly in v3, but after upgrading to Tailwind CSS v4, it no longer works.

Playground link: https://play.tailwindcss.com/ed3PRPUUgQ
You can switch the version in the Playground link to see the issue in action.

Is there a new way to write sibling selectors in v4? Or did support for ~ change?

[wongjn]

It's not the sibling combinator that is the problem. Rather, it is that stacked variants in v4 is applied in the opposite order to v3. So instead of hover:[&_.rating-button]:, you'd want [&_.rating-button]:hover:.

See https://play.tailwindcss.com/gFUDUHyKmu