Style descendant based on group without modifier

[skovy]

The group selector supports styling a descendant based on the parent's state (https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state).

It also supports differentiating groups (https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups) and arbitrary modifiers (https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups).

However, it does not support styling a descendant based solely on the group selector in any state (not a specific state).

The use case for this is a component can be nested in another component, and only in that case I would like to apply conditional values.

For example, ideally the following would work:

# Card
<div class="group/card">...</div>

# Button (green by default)
<div class="bg-green-500 group/card:bg-red-500">...</div>

# Button (red within the card, this does not work)
<div class="group/card">
  <div class="bg-green-500 group/card:bg-red-500">...</div>
</div>

This is achievable with a custom selector:

# Card
<div class="card">...</div>

# Button (green by default)
<div class="bg-green-500 [.card_&]:bg-red-500">...</div>

# Button (red within the card)
<div class="group/card">
  <div class="bg-green-500 [.card_&]:bg-red-500">...</div>
</div>

Would it be reasonable to allow the group:.. or group/{name}:... prefix to be used to apply styles to a descendant only when nested within that group (component)?

[wongjn]

There is the empty group-* variant, like group-[]/card: which seems to fullfil you request: https://play.tailwindcss.com/ecI4qtY52y

[skovy]

oh wow, that's exactly it! i tried a number of variants but didn't consider empty brackets. thank you! 🙏