Group Affecting Peer Elements

[tloughrist]

I would expect the group class to scope to only the element's children, not to its peers. However, it does seem to scope to its peers (and their children:

      <div>
        <div class="group">
          <span class="group-active:bg-gray-50">Div 1</span>
        </div>
        <div class="group">
          <span class="group-active:bg-gray-50">Div 2</span>
        </div>
        <div class="group">
          <span class="group-active:bg-gray-50">Div 3</span>
        </div>
      </div>

In this case, when any of the divs are active, all of the span elements have bg-gray-50 applied to them.

There's an easy workaround using named groups:

      <div>
        <div class="group/top">
          <span class="group-active/top:bg-gray-50">Div 1</span>
        </div>
        <div class="group/middle">
          <span class="group-active/middle:bg-gray-50">Div 2</span>
        </div>
        <div class="group/bottom">
          <span class="group-active/bottom:bg-gray-50">Div 3</span>
        </div>
      </div>

So, I don't need help, exactly. I just wanted to point out the issue and the workaround.

[wongjn]

Doesn't seem to exhibit the behavior you describe in this Tailwind Play which could indicate something particular to your project is causing the unexpected behavior.

[tloughrist]

Noted. I'll see if I can find the issue. Thanks! (If I had to guess, it's probably a group class applied to a some ancestor element way above the elements in question)