Group selector specificity breaks v3 => v4 upgrade for hover

[mikeE-finsight]

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:

1. Tried to revert using the hover using @custom-variant hover (&:hover);. This still doesn't work because of specificity issues.

The fix:

1. Add group-invalid:hover:bg-red-400 which is pretty clunky and not intuitive
2. 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!

[maltekuehl]

I'm experiencing a similar issue with Tailwind 4.0.6 and Next.js 15.1.7 where all group-hover styles are continously applied, even if the group is clearly not being hovered. Even using namespaced group names does not seem to solve this and basically makes it impossible to use the group property (and by extension Tailwind 4 for existing projects).

Edit: This seems to be a problem of the react aria components plugin rather than of Tailwind itself in my case, but leaving this comment up in case someone else has this issue: #15401