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
Upgrading from v3 => v4 breaks the specificity for group with invalid and hover classes.
From the repro:
<formclass="group p-5" action=""><inputclass="border border-black" type="text" required/><buttonclass="bg-indigo-400 p-1 group-invalid:bg-red-400 hover:bg-amber-200">hover me in v3 and then v4</button><!-- This fixes it by explicitly overriding the invalid hover which is not ideal --><buttonclass="bg-indigo-400 p-1 group-invalid:bg-red-400 hover:bg-amber-200 group-invalid:hover:bg-red-400">fixed in v4: added explicit hover</button></form>
I would expect the classes to still be something like .group:invalid .group-invalid\:bg-red-400 in v4 because that would maintain specificity between versions.
What I tried:
Tried to revert using the hover using @custom-variant hover (&:hover);. This still doesn't work because of specificity issues.
The fix:
Add group-invalid:hover:bg-red-400 which is pretty clunky and not intuitive
Add ! important (not ideal)
Desired Outcome
Can we add something to the Upgrade Guide? I'm happy to put up a PR for that but I want to verify if this is intended behavior first.
Thanks!
The text was updated successfully, but these errors were encountered:
What version of Tailwind CSS are you using?
v4.0.2
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15.1.3
What version of Node.js are you using?
v22.12.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/xDLYpPt75s
Describe your issue
Upgrading from v3 => v4 breaks the specificity for
group
withinvalid
andhover
classes.From the repro:
v3 CSS produces:
v4 CSS produces:
I would expect the classes to still be something like
.group:invalid .group-invalid\:bg-red-400
in v4 because that would maintain specificity between versions.What I tried:
@custom-variant hover (&:hover);
. This still doesn't work because of specificity issues.The fix:
group-invalid:hover:bg-red-400
which is pretty clunky and not intuitive! important
(not ideal)Desired Outcome
Can we add something to the Upgrade Guide? I'm happy to put up a PR for that but I want to verify if this is intended behavior first.
Thanks!
The text was updated successfully, but these errors were encountered: