The `not-` variant does not work as expected with named groups (`group/{name}`)

[rentalhost]

What version of Tailwind CSS are you using?

v4.0.0

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

Tailwind Play (https://play.tailwindcss.com/)

What version of Node.js are you using?

What browser are you using?

Chrome 131

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/DKPgTfOLF0

Describe your issue

<!-- Named group (does NOT work) -->  
<div class="group/test bg-red-50 p-8">  
  <div class="not-group/test-hover:text-red-500">Text (should be red when group is NOT hovered)</div>  
</div>  

<!-- Unnamed group (works correctly) -->  
<div class="group bg-green-50 p-8">  
  <div class="not-group-hover:text-green-500">Text (green when group is NOT hovered)</div>  
</div>  

Current Behavior:

• The not-group/test-hover:text-red-500 class does not apply styles when the named group (group/test) is not hovered.
• The not-group-hover:text-green-500 class works as intended for the unnamed group.

Expected Behavior:

Both named and unnamed groups should support the not- variant (e.g., not-group/{name}-hover and not-group-hover) to apply styles when the parent group is not in the specified state.

[ozipoetra]

I also have this problem on tailwind 4 and also on mobile browsers the hover group doesn't work but on desktop it's working properly

[wongjn]

From the beta docs:

In v4.0 we’ve updated the hover variant to only apply when the primary input device supports hover:

@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}

This can create problems if you’ve built your site in a way that depends on touch devices triggering hover on tap. If this is an issue for you, you can override the hover variant with your own variant that uses the old implementation:

@import "tailwindcss";

@variant hover (&:hover);

Generally though I’d recommend treating hover functionality as an enhancement, and not depending on it for your site to work since touch devices don’t truly have the ability to hover.

[KennethHoff]

This is unrelated to hover. not-* and group/<name> doesn't interact currently.

The following code doesn't work either:

<div className="group/test">
	<input type="checkbox" />

    <!-- This changes its state based on the condition of the checkbox -->
	<div className="group-has-checked/test:hidden">Checked</div>

    <!-- This always renders regardless of checkbox state -->
	<div className="not-group-has-checked/test:hidden">Not checked</div>
</div>

For completeness sake, this does work:

<div className="group">
	<input type="checkbox" />
	<div className="group-has-checked:hidden">Checked</div>
	<div className="not-group-has-checked:hidden">Not checked</div>
</div>

[alb-lv]

Created ticket 17314 for the has- case.

[chrisjansky]

I am also having issues making named groups work with not-hover.

In v3 I was able to make it work via a custom plugin:

    plugin(({ matchVariant }) => {
      /** Also works for named variants like group-not-hover/card:... */
      matchVariant(
        "group-not-hover",
        (_value, { modifier }) => {
          return `:merge(.group\\/${modifier}):not(:hover) &`
        },
        {
          values: {
            DEFAULT: "",
          },
        },
      )
    }),

Reading the docs there is no way to create such plugin in v4?

The best I could do to make it work is:

<div class="group/foo">
  <h2 class="group-[:not(:hover)]/foo:text-blue-500">Text</h2>
</div>

Registering a custom variant such as group-not-hover/foo would yield much better DX and avoid that code golf quality of above 😬

[programming-with-ia]

i also faced similar problem

[wongjn]

@programming-with-ia Your issue is different. You can resolve your issue by adding extra square brackets:

group-[[aria-checked=true]]/radio:scale-80

Though really, you don't need to use an arbitrary variant at all here:

group-aria-checked/radio:scale-80

[programming-with-ia]

@wongjn thanks 🚀

[MartinCura]

It is those moments where you find an elusive TailwindCSS bug and write something like

group-not-focus-within/row:group-not-[:hover]/row:hidden`

that you wonder if you're going too deep in the rabbit hole 😄 (thx for the idea, @chrisjansky!). Bug still present in v4.1.4.

[RobinMalfait]

Hey! This should be fixed by #19100, and will be available in the next release. The modifier was on the "not" variant instead of the "group-*" variant. Internally we now move this forward such that not-group-hover/name:flex works as expected.

You can already try it by using the insiders build npm install tailwindcss@insiders.