Extend ui-open:* docs with section on using TW 3.2 data attribute variants

[tordans]

The docs at https://headlessui.com/react/disclosure#using-data-attributes explain how to use ui-open:* with a special plugin to target the data attributes. It would be great to have a section below that shows how to use the TW native data attribute selection.

I used https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants as a reference and data-[headlessui-state=open]: works great, eg. the code below is in a custom Disclosure.Button:

        <InformationCircleIcon
          className="hidden h-5 w-5 data-[headlessui-state=open]:block"
        />
        <InformationCircleIconOutline
          className="block h-5 w-5 data-[headlessui-state=open]:hidden"
        />

I can create a PR for this but AFAIK the docs are in a private repo.

[tordans]

Update: The code above is actually wrong and https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-tailwindcss/src/index.ts#L15 shows that it is a lot more complex, so closing this for now.

Maybe TW v4 will bring us something we can use without a plugin…