Arbitrary variant nesting selector doesn't work with data attribute selector

[johtso]

What version of Tailwind CSS are you using?

v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

N/A

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/0ypNCIcob4

Describe your issue

Arbitrary variants allow you to only apply a class if it is the child of an element matching a selector.

This can be done like so: [.parentclass_&]:text-blue-600

You can also match based on data attributes like so: data-[parentdata='true']:text-blue-600

For some reason combining the two does not seem to work:
data-[parentdata='true'_&]:text-blue-600
or
data-[parentdata='true']_&:text-blue-600

[wongjn]

parentdata='true'_& is not a valid value for the data-[]: variant. It expects only either:

• An <ident>, corresponding to data-<ident> attribute existence.
• An <ident>=<value>, corresponding to data-<ident>="<value>".

For your case, it seems you could achieve your goal via a group-data-* variant: https://play.tailwindcss.com/7DmAySMH3P

[johtso]

Thanks! That looks much cleaner too..