The Hover Utility in the new version (4) does not end up working as expected ('only apply when the primary input device supports hover') if you try to group it with other utilities.

[UlssCrts]

In the new version of Tailwind (4), using Hover ('hover:') first checks that the device really supports this effect to apply it or not, which works correctly, but if I try to group it with other utilities this check is not done or it does not apply as expected. I'm not sure if I'm applying this the right way.

This is what I have been wanting to group:

hover:text-black hover:dark:text-white
hover:font-semibold hover:underline
focus:text-black focus:dark:text-white
focus:font-semibold focus:underline
aria-[current=true]:text-black aria-[current=true]:dark:text-white
aria-[current=true]:font-semibold aria-[current=true]:underline

Here is an example of what I was trying to group and it didn't work:

[&:is(:hover,:focus,[aria-current=true])]:text-black
[&:is(:hover,:focus,[aria-current=true])]:dark:text-white
[&:is(:hover,:focus,[aria-current=true])]:font-semibold
[&:is(:hover,:focus,[aria-current=true])]:underline

Hover only works correctly if I keep it separate:

hover:text-black hover:dark:text-white
hover:font-semibold hover:underline
[&:is(:focus,[aria-current=true])]:text-black
[&:is(:focus,[aria-current=true])]:dark:text-white
[&:is(:focus,[aria-current=true])]:font-semibold
[&:is(:focus,[aria-current=true])]:underline

I just want to have my styles more simplified. Is this the correct way to group these utilities or is there another way?

[wongjn]

When you do [&:is(:hover,:focus,[aria-current=true])]:, you "lose" the primary pointer check since you've now fallen back to regular CSS. hover: is not directly analogous to :hover, since it has the @media (hover: hover) in it too.

You could keep them separate as you are now or perhaps make your own variant with @custom-variant:

@custom-variant foo {
  &:hover {
    @media (hover: hover) {
      @slot;
    }
  }
  &:is(:focus, [aria-current="true"]) {
    @slot;
  }
}

<div class="foo:text-black foo:font-semibold foo:underline dark:foo:text-white">

[UlssCrts]

Thanks! Where can I add the @custom-variant?

[wongjn]

In your input CSS file.

[UlssCrts]

I tried adding it inside @theme and outside:

@import "tailwindcss";

@theme {
    --font-sans: Inter, system-ui;
    --font-grotesque: "Bricolage Grotesque", system-ui-serif, sans-serif;
    --color-lemon-lime: #DBF227;
    --color-yellow-green: #9FC131;
    --color-brunswick-green: #005c53;
    --color-prussian-blue: #042940;
}

but it shows me "Unknown at-rule" in @custom-variant and @slot. I am not familiar with how it should be applied.

[wongjn]

I assume you're talking about VSCode. Its CSS validator doesn't understand the Tailwind CSS specific syntax but it shouldn't impact the operability of the project itself. You could consider ignoring the warnings, disable them or installing and setting up the Tailwind Intellisense VSCode extension.

[UlssCrts]

Thank you! I have added it outside and it works.

@import "tailwindcss";

@theme {
    --font-sans: Inter, system-ui;
    --font-grotesque: "Bricolage Grotesque", system-ui-serif, sans-serif;
    --color-lemon-lime: #DBF227;
    --color-yellow-green: #9FC131;
    --color-brunswick-green: #005c53;
    --color-prussian-blue: #042940;
}

@custom-variant hover-focus-ariacurrent {
    &:hover {
        @media (hover: hover) {
            @slot;
        }
    }
    &:is(:focus, [aria-current="true"]) {
        @slot;
    }
}

I'm using IntelliJ and for some reason it doesn't recognize @custom-variant or @slot, as well as it fails to autocomplete the @custom-variant when I try to use it, but it works!