Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Group selector specificity breaks v3 => v4 upgrade for hover #16214

Open
mikeE-finsight opened this issue Feb 3, 2025 · 0 comments
Open

Group selector specificity breaks v3 => v4 upgrade for hover #16214

mikeE-finsight opened this issue Feb 3, 2025 · 0 comments

Comments

@mikeE-finsight
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant