[v4] `group-not-hover` does not work

[sntran]

What version of Tailwind CSS are you using?

4.0.0-alpha.30

What build tool (or framework if it abstracts the build tool) are you using?

@tailwind/cli@4.0.0-alpha.30

What version of Node.js are you using?

For example: v20.12.02

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/oqdmmGAY2k

Describe your issue

On 4.0.0-alpha.28 (and also 4.0.0-alpha.29), I could use group-not-hover variant to style a child element when the parent is not being hovered. However, after upgrading to 4.0.0-alpha.30, that variant is no longer handled and @tailwind/cli will throw error when I @apply group-not-hover:text-red-100 in my CSS.

Probably related to #14743?

[wongjn]

For what it's worth, not-group-hover seems to work: https://play.tailwindcss.com/FigYJBFR6v

[RobinMalfait]

Hey!

In this case you probably want not-group-hover:… instead. See: https://play.tailwindcss.com/OgyaHaUv8E

We made the inner workings better on how some variants work with other variants. In this case, you can combine variants such as hover with group-* and not-*, you can also combine group-* with not-*, but you can't combine not-* with group.

I know it's a simplified example, but in this case you can even remove the not-group-hover part entirely:

  <p class="group">
-   <a href="#" class="not-group-hover:text-blue-500 group-hover:text-red-500">Click Me</a>
+   <a href="#" class="text-blue-500 group-hover:text-red-500">Click Me</a>
  </p>

Hope this helps!