Group and group-hover Not working at responsive screen in tailwind-V4

[Mfauzan1]

Dear team .

Group and group-hover Not working at responsive screen in tailwind-V4

video-38169582-3ea621e000c8996e3ce17f7fae11cbd6.webm

Br//
Muhammad Fauzan

[wongjn]

The hover variant (and its derivatives, including group-hover) includes @media (hover: hover). So if your device/browser/responsive screen emulation combination does not pass this media query check, you would not see hover styles.

[Mfauzan1]

The hover variant (and its derivatives, including group-hover) includes @media (hover: hover). So if your device/browser/responsive screen emulation combination does not pass this media query check, you would not see hover styles.

Whatever is there on your website — like the example you provided and the video I sent you — if in Tailwind version 4 the group-hover or hover doesn't work in responsive mode, then is it a Tailwind issue?

Because sometimes I use links (probably referring to online Tailwind generators) to generate the CSS, but I see the same issue everywhere.

[Mfauzan1]

Like b/m eg for my use

                            <span class="absolute top-0 left-0 w-68 h-68 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-86 -translate-y-32 bg-[#000]/30  opacity-100 group-hover:-translate-x-[-20px]"></span>
                            <span class="relative w-full text-left text-[#1F1F1F] uppercase lg:text-[13px] md:text-[11px] text-[10px] font-[500] xl:tracking-[1.5px] tracking-[1.2px] transition-colors duration-200 ease-in-out group-hover:text-[#fff]">
                                Explore Our Sign Solutions
                            </span>
                            <span class="ml-2">
                                <img src="assets/images/arrow.webp" alt="arrow" class="lg:w-auto w-5" loading="eager" width="29" height="28">
                            </span>
                            <span class="absolute inset-0 border-[1.5px] border-transparent rounded-full"></span>
                        </a>

[wongjn]

if in Tailwind version 4 the group-hover or hover doesn't work in responsive mode, then is it a Tailwind issue?

I believe it is intentional. In responsive mode, the browser emulates a touch device. hover variant intentionally has @media (hover: hover) media query to not activate on touch devices:

.group-hover\:text-red-500 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: var(--color-red-500);
    }
  }
}

If you want hover to work on touch devices and responsive mode, override the hover variant to remove the media query:

@custom-variant hover (&:hover);

This would now produce:

.group-hover\:text-red-500 {
  &:is(:where(.group):hover *) {
    color: var(--color-red-500);
  }
}