group-focus-within

[xylophonehero]

Hey thanks so much for twin.macro. It makes building sites with Styled Components and Tailwind so much fun!

I wondered is it possible to have a group-focus-within pseudo selector?

I managed to replicate it with normal CSS in a styled component but it would be great if it were selector so I didn't have to come up with classnames!

const FakeGroup= styled.div(() => [
  tw`h-full`,
  {
    ":focus-within .hover-menu": tw`visible`,
    ":focus-within .hover-tab": tw`text-blue`,
  },
])

=>

<div className="group" tw="h-full">
 <div tw="group-focus-within:(visible)" invisible">{...}</div>
 <div tw="group-focus-within:(text-blue)" text-gray">{...}</div
</div>

[ben-rogerson]

That sounds like a great idea, I'll add this in a future release 👍