You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
What version of prettier-plugin-tailwindcss are you using?
Latest
What version of Tailwind CSS are you using?
Latest
What version of Node.js are you using?
Latest
What package manager are you using?
pnpm
What operating system are you using?
Ubuntu
Describe your issue
Plugin does not change the order of the modifiers in case we use 2 or more modifiers, for example hover:after:left-0 and after:hover:left-0. After formatting It should be hover:after:left-0 in both cases, but it is not.
The text was updated successfully, but these errors were encountered:
Hey! So the order of variants in a utility is important. The fact that both hover:after:left-0 and after:hover:left-0 work is for legacy compatibility because pseudo elements in nearly all cases must be at the end of a CSS selector.
In some cases pseudo elements can have pseudo classes attached and the order is then observable an different — on both inputs hover the text and then just the button itself to see a difference in behavior: https://play.tailwindcss.com/4BCtjYqsZV
We're also doing some thinking around this stuff in v4 which will mean that we'd want to explicitly avoid sorting these because ::after:hover could become valid in the future and we'd want to be able to write variant(s) that represent that.
Thank you for explanation Jordan! I didn't know about this legacy behavior, I raised this issue because I noticed that in both cases in CSS it will be :hover::after. It would be great if v4 will allow ::after:hover 👍
What version of
prettier-plugin-tailwindcss
are you using?Latest
What version of Tailwind CSS are you using?
Latest
What version of Node.js are you using?
Latest
What package manager are you using?
pnpm
What operating system are you using?
Ubuntu
Describe your issue
Plugin does not change the order of the modifiers in case we use 2 or more modifiers, for example
hover:after:left-0
andafter:hover:left-0
. After formatting It should behover:after:left-0
in both cases, but it is not.The text was updated successfully, but these errors were encountered: