Group:hover with @apply

[gonewild22]

Unfortunately group:hover stops working when I put it in my application.css with @apply. (no .group-hover:text-gray-500 pseudo class is set in the browser) When I put "group-hover" back into html everything works as it should. (even if the parent "group" element stays in my application.css)

Working & non working example:
https://play.tailwindcss.com/UbhcO0YBp2?file=css

Do I misunderstand or oversee here something? Thx in advance!

[ericp-mrel]

You could always write it like this and get rid of the @apply group-hover since this is guaranteed to work.

.sidemenu {
  @apply group rounded-md px-3 py-2 flex items-center font-medium;
}

.sidemenu:hover {
  @apply text-gray-900 bg-gray-50;
}

.sidemenu:hover .sidemenu-icon {
  @apply text-gray-500;
}

.sidemenu--settings {
  @apply text-sm text-gray-900 ;
}

.sidemenu-icon {
  @apply flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400; 
}

[simonswiss]

Hey!

I would suggest you don't use @apply to abstract group and group-hover. Here's why:

1. It will generate a LOT (~3,500 with default config) of classnames for all possible permutations 😅
2. It will not work in your scenario where you also try to abstract away the group-hover class.

When you you abstract away the group class in @apply, it tries to style the child element (the one with the group-hover class), and the generated CSS looks like so:

.sidemenu:hover .group-hover\:text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

Basically, it says:

Whenever the element with a sidemenu class is hovered, apply text-gray-900 to any element with the group-hover class name.

If the group-hover class is not found on a child element, it will not work. In other words, the group-hover class must be on the HTML element for it to work.

In your case, you're trying to abstract that classname inside of a sidemenu-icon.

That means the .sidemenu:hover .group-hover\:text-gray-900 selector will never be matched.

If you really want to abstract away the group-hover, I would most definitely use the group class in your HTML as the "toggle", and then let sidemenu-icon handle the group-hover abstration:

In this example, I have just removed the group from the @apply statement, and put it in the HTML for both examples, which now both work.

https://play.tailwindcss.com/jiY9Zd7JZo

Hope it helps! 👍

[gonewild22]

Thanks for your detailed answer, I really appreciate it. I have not yet considered all permutations that are created this way 😅 So I will go the safe way now and abstract only the basic stuff and put the fancy group and group-hover classes in html directly. Thx again! 👍

[kalnode]

You could always write it like this and get rid of the @apply group-hover since this is guaranteed to work.

.sidemenu {
  @apply group rounded-md px-3 py-2 flex items-center font-medium;
}

.sidemenu:hover {
  @apply text-gray-900 bg-gray-50;
}
....

So... basically using classic CSS :hover.

I have no problem with this, however does this still suffer some kind of TW performance hit?

I do use group-hover often directly in HTML for custom templates, going along with what @simonswiss outlines, however for my long term component system I really need to abstract-everything.