Support for @headlessui/tailwindcss prefixes

[stassinari]

HeadlessUI has recently released @headlessui/tailwindcss, "A complementary Tailwind CSS plugin for Headless UI".

This new plugin adds useful prefixes to style different states for certain HeadlessUI components, such as ui-active, ui-not-active, etc.

Unfortunately, when trying to use this with twin.macro I get an error like:

✕ The variant “ui-active:” was not found

When using just className instead, everything works as expected.

I'm using Vite + Emotion.

I'm not able to create a sandbox at this moment, let me know if you think it would help and I'll try and make one.

I was wondering, in the meantime, if this is expected and supporting this doesn't come for free (I see this package is not listed here https://twinmacro.dev/plugin-support), or if there must be something wrong with my config.

[ben-rogerson]

have you tried headlessui with the latest twin version?

npm i twin.macro@rc

Previously there was limited plugin support but we reached full support in rc.4.

Also that plugin support page is outdated now and needs to be taken down - thanks for the reminder :)

[stassinari]

It worked! Thank you for the quick reply 🙏

In case someone else comes across this, to successfully upgrade twin to the new v3 version (for me ^3.0.0-rc.4) I had to add this to my Vite config:

optimizeDeps: {
  esbuildOptions: {
    target: "es2020",
  },
},