search

rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.78k stars 96 forks source link

Support for @headlessui/tailwindcss #147

Closed Andyloz closed 1 year ago

Andyloz commented 1 year ago

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 commented 1 year ago

Duplicate of #97