tailwindcss
tailwindcss copied to clipboard
Group selector specificity breaks v3 => v4 upgrade for hover
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 with invalid and hover classes.
From the repro:
<form class="group p-5" action="">
<input class="border border-black" type="text" required />
<button class="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 -->
<button class="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>
v3 CSS produces:
.hover\:bg-amber-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.group:invalid .group-invalid\:bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
v4 CSS produces:
.group-invalid\:bg-red-400 {
&:is(:where(.group):invalid *) {
background-color: var(--color-red-400);
}
}
.hover\:bg-amber-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-amber-200);
}
}
}
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-400which 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!