Colors not applied correctly using WindiCSS. (Svelte, Vite, WindiCSS)

[atresnjo]

Hey, I'm trying to set up a new project using Svelte with Vite as build tool and WindiCSS.

btn-primary doesn't seem to work, butbg/text-primary seems to work fine.

I have uploaded a repo showcasing the issue. https://github.com/atresnjo/svelte-vite-daisyui-windicss

Here's what the output looks like

Thanks again for your great work so far, loving your slick design! 🥇

[saadeghi]

@atresnjo Hi.
I think currently using Daisy on WindiCSS is experimental. It looks like WindiCSS is ignoring --tw-bg-opacity and --tw-text-opacity variables from Tailwind.
I know on Tailwind, when we use a color like bg-blue-500 or any other color, it adds --tw-bg-opacity: 1 to that element as well as the background color but WindiCSS seems to work differently.

@marshallswain Can you please help us here?

[marshallswain]

It's definitely a problem with the --tw-bg-opacity and --tw-text-opacity variables. I just made a minimal example with Vue and found the following style in the browser. Notice how the two variables only have a single - prefix. If I edit the style in the Svelte project or my new mini Vue project, it fixes the colors. I've also re-looked through my app that's working and can't identify a single thing that's different... yet.

[marshallswain]

You can work around the variable issue by adding them to the :root style, like this:

In my working app, the button groups and other components are all working without any changes. I've copied the config over from the working app into the non-working minimal app, and it's still not working. I'm not yet able to trace down the source of the missing -.

[marshallswain]

Uggh. I found the issue. It's a little bit embarrassing.

@saadeghi I will work on creating a plugin just for Windi. Their transform utility is definitely not working. I must have had made a git mistake and uncommented that line while I was working on getting the colors to work.

[marshallswain]

@atresnjo, I recommend that you use the cdn version until I have the new plugin made. Windi's API is a bit simpler than Tailwind's, so far, so we'll see how quickly it happens.

[atresnjo]

Hey, thanks guys for the help! I've switched to tailwindcss-jit. Seems to work fine! Not sure yet if there are any caveats compared to WindiCSS, but so far so good.

[gunters63]

I found the reason for the single dash variables, see here: Component generation not 100% compatible to TailwindUI with leading dashes