Color variables/themes not working as intended

[raintje]

Hello all, I've recently been trying out AstroJS with Tailwind and I'm having some problems with configuring the color scheme/themes that I want to use in the application.

I used a similar configuration in a previous project of mine, where I define theme variables that change depending on a class or data attribute, as I've seen in various online examples and the documentation. When the app boots I use JS to add a data attribute to the root HTML element - standard stuff.

However, when I run the application in dev mode - which uses Vite under the hood - I find that the newly defined color variables don't work. Every other utility class works as intended. I used a similar setup when I was trying out Sveltekit, which also uses Vite, a few weeks ago, albeit with a class-based approach instead of the data attribute.

Could someone take a look at my TailwindCSS config to see if I'm missing something? Here's a repository I set up: https://github.com/raintje/astro-tailwind-test/

Tailwind config can be found here, and the bit of JS that appends the data attribute to the HTML tag is here.

Thanks in advance!

[wongjn]

Unquote your CSS variables in the data-theme rules. For example:

 /* Light mode, a.k.a. Cappuccin Latte */
 [data-theme='latte'] {
   /* Monochrome colors */

   /* Background colors */
-  --theme-base: '#eff1f5';
-  --theme-mantle: '#e6e9ef';
-  --theme-crust: '#dce0e8';
+  --theme-base: #eff1f5;
+  --theme-mantle: #e6e9ef;
+  --theme-crust: #dce0e8;

[raintje]

Oh man, I was afraid it was something obvious like this... Thank you for your time. ^^