Compatibility with TailwindUI?

[kcsf]

Hello,
We're really excited to see what tailwindcss-theming can do. We spent most the day trying to get it to work along side tailwindui. It appears the plugins conflict somehow. Whichever plugin is listed first, writes the css - whichever follows, doesn't write anything after the :root stuff.

In tailwind.config.js, we have this in 'plugins'
plugins: [ require('@tailwindcss/ui'), require('tailwindcss-theming') ]

After running npm run build - none of the CSS Custom Properties are written (for things like .addColors).
If we change the order of the plugins, then it works, but the tailwindui colors aren't written.

Will you help?
(please and THANKYOU)

[innocenzi]

Hello!

The way this plugin works is by making use of the plugin API to override your Tailwind configuration. This is required, because we need the color values to be CSS variables, not hard-coded color values.

The @tailwindcss/ui provides another color palette, too. But it is using the default Tailwind format, not the enhanced CSS-variable-powered one. Because of that, whichever plugin comes first takes precedence.

But with this plugin, you are not supposed to use non-semantical color names such as blue-100 or indigo-400, because those colors wouldn't work the same in two different themes. I tend to use the Material naming conventions.

The way this plugin works make it a breeze top create multiple themes, but it comes with a downside: we don't use the Tailwind way of doing things. We have to name colors. So, to make it short, when using tailwindcss-theming, you are expected to build your own palette (or use a preset). You can't use the default Tailwind palette directly, nor any palette that comes with a plugin.

This plugin is best-suited for large projects, but if you need something simpler, more Tailwind-like, I suggest you take a look at @estevanmaito's variant-based plugin, tailwindcss-multi-theme. It takes a different approach, without CSS variables. There are also a few other alternatives.

Hope I cleared things up, don't hesitate to reopen if you need further assistance!

[kcsf]

Thanks for the quick & thorough response innocenzi!

Pitty it isn't going to work for us, you've done great work here!

Cheers;)