group-has-[input:checked] as group-checked (based on the pattern of peer-checked, but for nested elements)

[rozsazoltan]

In relation to a question (How can the peer class be used not only on sibling elements but also within nested child elements?), I wrote a custom variant that applies specific classes if there is an input:checked within a given .group - I'm sharing it here as well.

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

<div class="group">
  <input type="checkbox" />
  <label>Example</label>
  <div>
    <p class="hidden group-checked:block">Checked</p>
  </div>
</div>

• Tailwind Play

Unfortunately, custom variants written for the group variant do not support named groups, so they have to be re-declared manually for each named group. I believe a nameless example is sufficient for demonstration purposes.