search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
349 stars 13 forks source link

Support twin.macro #7

Closed ImBaedin closed 2 years ago

ImBaedin commented 2 years ago

I'm currently using twin.macro to compile my tailwind styles at build time. I'm able to work around many of the headless ui components using this example provided by the twin.macro author, but nothing is working for this project.

I understand if this isn't something you're interested in implementing.

If you are, however, I recommend checking out this file. It shows an example of how to set up twin.macro with the Transition component. In the case of Float, maybe it would be possible to accept both a string and a TwStyle type for the properties?

ImBaedin commented 2 years ago

Using emotion, I was able to develop a workaround.

https://gist.github.com/ImBaedin/caad28d6f7aa42060794f54b1082274d

Basically, I use emotion's ClassNames component and render props to create custom class names for each custom style, which I pass to Float.