Combine named peer and named group variants

[n3dst4]

I've found that combining group and peer works great to style "children of elements which follow other elements". Something like:

  <div class="peer" data-foo>this is a peer with a data attribute</div>

  <div class="group">
    <div class="group-peer-data-foo:bg-green-500"">this should be green</div>
  </div>

You can also use a named group:

  <div class="peer" data-foo>this is a peer with a data attribute</div>

  <div class="group/mygroup">
    <div class="group-peer-data-foo/mygroup:bg-green-500"">this should be green</div>
  </div>

My question though, is: can you also combine this with a named peer? This (and several variations on it) don't work:

  <div class="peer/mypeer" data-foo>this is a peer with a data attribute</div>

  <div class="group/mygroup">
    <div class="group-peer-data-foo/mygroup/mypeer:bg-green-500"">this should be green</div>
  </div>

Playground link: https://play.tailwindcss.com/yGQ6ghZChV

Thank you!

[wongjn]

No, I think in Tailwind's fundamental class syntax, there is only "space" for one modifier. You can work-around this limitation use arbitrary syntax though: https://play.tailwindcss.com/hDuyJKKWx8

[n3dst4]

Yeah, I see - thanks.