in-open doesn't work in nested scenarios

[skttl]

What version of Tailwind CSS are you using?

4.1.7

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

Tailwind Play

What version of Node.js are you using?

whatever Tailwind Play does

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/Z9z8fdBjse

Describe your issue

When nesting details elements, the is-open variant is not useful, as it matches with the outer details element. See the play link, where I have some text that displays whether or not the details element is open. When opening the outer one, the inner displays as open too.

[wongjn]

It seems like in-* is not the right tool for the job in your case. Consider using named groups or arbitrary variants: https://play.tailwindcss.com/TRynwz3u9o

[skttl]

Works for me, thanks for pointing me in a better direction!