Support for @headlessui/tailwindcss

[Andyloz]

I was working with a Disclosure and i tried to add an ui-open:* class. Look here, the docs for @headlessui/tailwindcss

For this to work, Tailwind relies on a data attribute that is set. This is the css rules generated by Talwind:

.ui-open\:rotate-180[data-headlessui-state~="open"] {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-headlessui-state~="open"]) .ui-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

Since that attribute is not added, it does not work.

More info on the official Disclosure docs

[rgossiaux]

Duplicate of #97