Difficulty with group-{modifier} in Tailwind 3.4.3

[karlsnyder0]

I was using Tailwind 3.3.1 with the following layout-

<div style="--sidebar-width: 320px; --sidebar-width-icon: 64px;">
  <div class="group" data-state="collapsed" data-collapsible="icon">
    <div data-slot="sidebar-gap" class="w-[var(--sidebar-width)] group-data-[collapsible=icon][data-state=collapsed]:w-[var(--sidebar-width-icon)]"></div>
  </div>
</div>

The group modifiers in the above example worked perfectly.

Once we upgraded to Tailwind 3.4.3 the same group modifiers stopped working.

Has anyone had success with 3.4.3 and group modifiers?

[wongjn]

If it was working in 3.3.1, I'd say it is purely accidental, since it doesn't seem a like valid Tailwind variant. You'd either want:

group-[&[data-collapsible=icon][data-state=collapsed]]:w-[var(--sidebar-width-icon)]

Or

group-data-[collapsible=icon]:group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]

[karlsnyder0]

Brilliant! It didn't even occur to me to expand the syntax to-

group-data-[collapsible=icon]:group-data-[state=collapsed]

For what it's worth, group-data-[collapsible=icon][data-state=collapsed] definitely worked and can be seen in https://v4.shadcn.com/

[karlsnyder0]

Tailwind Play: https://play.tailwindcss.com/VeYmxuOid8

[wongjn]

For what it's worth, I just did a search for group-data-[collapsible=icon][data-state=collapsed] in https://v4.shadcn.com/ and returned 0 results.

[karlsnyder0]

For what it's worth, I just did a search for group-data-[collapsible=icon][data-state=collapsed] in https://v4.shadcn.com/ and returned 0 results.

You're right, they don't use that exact syntax. I'm not really sure where I got the syntax from. It looks like it accidentally worked in 3.3.1 but is clearly not working in recent versions.

Thanks again for the help! It is appreciated!