issues regarding nested groups

[iam-yan]

For example:

.A .group

.B .group-hover:bg-white
.C .group

.D .group-hover:text-red

I think the elements with group-hover should look for the nearest group and ignore the rest. But for now if I hover on A, both B and D will respond...

How can I achieve the effect I want? i.e. hover on A -> only B gets changed.

[lucidlips]

I am interested in a tailwind solution for this also. Even something as simple as multiple groups would allow me to use tailwind to solve this problem.

eg.

• group - group-hover:text-black
• group-1 - group-1-hover:text-black

[tlgreg]

Multiple named groups could be a good solution.

Nearest group hover isn't really possible with css, or at least not without very large selectors.

Unless there is a better way, the only one I can think of now is repeating each possible nesting level with a child combinator.
eg.:

.group:hover > .group-hover\:text-red-500,
.group:hover > :not(.group) > .group-hover\:text-red-500,
.group:hover > :not(.group) > :not(.group) > .group-hover\:text-red-500,
.group:hover > :not(.group) > :not(.group) > :not(.group) > .group-hover\:text-red-500 {
  color: #f56565;
}

The above only works in cases if group-hover is not nested deeper then 3 levels.

Created two example plugins for each of the above cases, can be used as workarounds.

• One that generates the above "nearest group hover" selectors, the depth can be customized with the nearestGroupHover.depth key in theme (number):
  https://tailwind.run/hjvv9t/1
• And a "named group hover" plugin, which accepts the names in namedGroupHover.groups key in theme (string[]) and generates multiple group-hovers for each group name. This one should be used in place of the group-hover variant as it also generates the default unnamed group:
  https://tailwind.run/2oMKt9/1