How to use styling based on parent state

[Superpat]

Hello, I've been trying to adapt my use of https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state to this, but I've been unable to understand how.

So I'm looking to understand how to apply group class to my element and how to apply a style based on the state of an attribute in that element. For example:

<details open={expanded.value} class="group">
  <summary class="group-open:text-pink">
    Example
  </summary>
</details>

[danpacho]

You can use tw.style method's 'group' property to write type-safe group style classnames.

For instance

const groups = tw.style({
    // basic styles here
    group: {
        ":hover": {
            backgroundColor: "group-hover:bg-red-100",
            borderColor: "group-hover:border-red-300",
        },
        ":active": {
            backgroundColor: "group-active:bg-green-300",
            borderColor: "group-active:border-green-100",
        },
    },
})

And then apply it group's children elements.

🔮 You should write "group" property at parent element by manually.

const MyGroups = () => 
  <details open={expanded.value} class="group">
    <summary class={groups.class}>
      Example
    </summary>
  </details>