[v4] after:focus-within:ring is not working as in v3

[octoper]

What version of Tailwind CSS are you using?

v4.0.6

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

Vite v5.4.14

What version of Node.js are you using?

NodeJS v20.13.1

What browser are you using?

Chrome, but also checked other browsers like Firefox and Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/OAD9WcRBin

Describe your issue

after:focus-within:ring-* in v4 is not working as in v3 and haven't found any changes in the doc about it

[wongjn]

The change is documented here:

In v3, stacked variants were applied from right to left, but in v4 we've updated them to apply left to right to look more like CSS syntax.

Working version of your Play with the variants reversed.

[octoper]

Oh god how did I missed that, thank you @wongjn!