Twin.macro: Is there a way to get Tailwind UI to work with this?

[aizkhaj]

Apologies if this is rudimentary information, I'm new to the world of Tailwind CSS. Would it be correct to assume issue #7 is somewhat connected to having the ability to use @tailwindcss/ui (if it is considered a plugin)?

TailwindUI is an official product, a set of components built using TailwindCSS. In order to currently use it, there is a small adjustment that is needed on the PurgeCSS regex case (inside postcss.config.js) when setting up for TailwindUI. I am not sure if this is something Twin.macro would help with or if that'll be more for emotion to deal with.

I'm trying to use this Next.js + Tailwind + Emotion example, and want it for SSR reasons, but I can't currently seem to figure out what I need to connect TailwindUI to this system. Any input on the topic would be really welcome. Thank you for the great alternative to tailwind.macro!

[ben-rogerson]

Without having used it yet (it looks pretty sweet) I'm not able to test.
I'm pretty sure it would be a plugin though and unfortunately, we don't have full support for them yet.

Feel free to message me the installation instructions on Twitter if you'd like.

[aizkhaj]

@ben-rogerson your DMs are closed so maybe message me instead and I can send you the installation instructions?

[ben-rogerson]

Further plugin discussion is happening in https://github.com/ben-rogerson/twin.macro/issues/7

[oorestisime]

Hey, sorry to comment here, read the other issue but i couldn't find a clear answer on this. Is TailwindUI compatible in the end with the recent alpha releases of this?
I don't have the instructions, i am considering buying it but i ve already worked a bit my structure with twin.macro

[ben-rogerson]

Twin doesn't support addComponents in plugins and at least one dependency of TailwindUI (@tailwindcss/custom-forms) is using them.
I hope to add support in the future, but not sure when that will be - sorry!

[oorestisime]

Sorry not really sure if this makes sense but i tried adding tailwindui thinking that if i don't call addComponents it would work (i can wait for addComponents).

so in my tailwind i added:

plugins: [require("@tailwindcss/ui")]

and got:

twin.macro: Cannot find module 'tailwindcss/plugin'
Require stack:
- app/node_modules/@tailwindcss/ui/index.js

Same if i try to

plugins: [
        ({addUtilities}) => {
            addUtilities(require("@tailwindcss/ui"))
        }
    ]

I guess i am doing something entirely wrong, and forgive me i am fairly new to tailwind actually :D

So i am wondering whether there's way to get the new utilities from the ui without the components. That would cover my case for quite some time. https://tailwindui.com/documentation#getting-set-up

Thanks again for your answer!

[ben-rogerson]

@oorestisime I'm afraid there's no current support for tailwind UI - sorry!

[oorestisime]

heheh ok fair enough :) i would have tried!

[rawkode]

Don't suppose this is possible yet, @ben-rogerson ?

[ben-rogerson]

I've been making progress and have a demo up for testing. I just need to finish off the support for custom variants and I'll push a release.

[rawkode]

Amazing, @ben-rogerson ; great job!