group-peer-checked/peer-name interpreted as group name, not peer name

[mudge]

We're using named peers to differentiate several checkboxes, e.g.

<input type="radio" name="menu" class="peer/foo hidden" />
<input type="radio" name="menu" class="peer/bar hidden" />

We then want to style some sibling elements using the named variants of peer-checked, e.g.

<input type="radio" name="menu" class="peer/foo hidden" />

<div class="peer-checked/foo:hidden">

However, we also want to style descendant elements based on the named peer, e.g.

<input type="radio" name="menu" class="peer/foo hidden" />

<div class="group">
  <div class="group-peer-checked/foo:hidden"></div>
</div>

The issue here is that Tailwind CSS 4 seems to interpret foo as the name of the group rather than the name of the peer and generates the following class:

.group-peer-checked\/foo\:hidden:is(:where(.group\/foo):is(:where(.peer):checked ~ *) *)

Instead of the following as I'd expect:

.group-peer-checked\/foo\:hidden:is(:where(.group):is(:where(.peer\/foo):checked ~ *) *)

I suppose this is an ambiguity in the class name as it isn't really possible to figure out whether /foo in group-peer-checked/foo refers to the peer or the group name.

Is there a way to make this unambiguous?

[rozsazoltan]

The group-* (such as group-peer-* too) utilities all belong to group, so the modifier you provide there targets the group's name (group/foo), not the peer name you expect (peer/foo). Actually, I think there's no way to specify the peer name here, but you can do it with arbitrary selector:

• https://play.tailwindcss.com/8sE9Uqm9DP

<input type="checkbox" name="menu" class="peer/foo" />

<div class="group">
  <div class="group-[&:is(:where(.peer\/foo):checked_~_*)]:hidden">
    Hello World
  </div>
</div>

group-[.peer\/foo:checked~&]/bar:hidden (for .peer/foo ~ .group/bar)

This is a bit more elegant:

• https://play.tailwindcss.com/Q7pbxuzFIC (recommended)

<input type="checkbox" name="menu" class="peer/foo" />

<div class="group/bar">
  <div class="group-[.peer\/foo:checked~&]/bar:hidden">
    Hello World
  </div>
</div>

group-peer-foo-checked/bar:hidden (for .peer/foo ~ .group)

Or custom variant (what can't handle group name modifier):

• https://play.tailwindcss.com/7szteUh43p?file=css

@custom-variant group-peer-foo-checked {
  &:is(:where(.group):is(:where(.peer\/foo):checked ~ *) *) {
    @slot
  }
}

(This isn't bad either, but it doesn't save any characters from the class name length, and it would require a separate variant for each peer/name, which seems like unnecessary duplication compared to using an arbitrary value.)

[rozsazoltan]

Just some additional ideas if we don’t want to deal with the problem.

group-checked:hidden (for .group without .peer)

But if the named peer can't be used anyway, in this case it’s worth considering finding a simpler solution for the sibling reference instead of using a peer.

• `group-has-[input:checked]` as `group-checked` (based on the pattern of `peer-checked`, but for nested elements) #18044
• https://play.tailwindcss.com/RxQYPhPwXu (This also isn't able to detect the group name.)

@custom-variant group-checked {
  &:is(:where(.group):has(input:checked) *) {
    @slot;
  }
}

This is just a shorthand for the recommended example, in case someone would use group-has-[input:checked] very often, but until it's implemented in the TailwindCSS engine, group names aren't accessible.

group-has-[input:checked]/bar:hidden (for (.group/bar > .group/foo) without .peer)

Of course, group-has-* is more elegant in this case if you also need to specify a group-name modifier.

• https://play.tailwindcss.com/dGw2akACQI (recommended)

<div class="group/bar">
  <input type="checkbox" name="menu" />
  
  <div class="group/foo size-32 bg-sky-100">
    <div class="group-has-[input:checked]/bar:hidden text-green-500 group-hover/foo:text-sky-500">
      Hello World
    </div>
  </div>
</div>

Of course, it doesn't solve the underlying problem that we can't pass the peer name in group-peer-*, but it can partially serve as a workaround.

[mudge]

Thank you for these detailed suggestions, @rozsazoltan.

I ended up going with a slight variation of your recommended approach:

<input type="radio" name="menu" class="peer/foo hidden" />

<div class="group">
  <div class="group-[.peer\/foo:checked~&]:hidden"></div>
</div>

As we only have one group, there's no need for named groups but we can still use the arbitrary selector and the subsequent sibling combinator to only make the inner div hidden when its group follows the checked, named peer checkbox.