TailwindCSS class does not get compiled if constructed from var

[tiny sable]

Hey everyone, I'm new to astro and was trying to create a sample site with support to multiple palettes.

Currently I've tried to do it like you can see in test.astro.

My current tailwind config can be found on the second image.

Tailwinds does work if I don't construct the class names with varaibles and just do them hardcoded. (if i inspect the html of the web page the class name is there in the html body but not in the css file)

As you can see in my astro config I've included tailwind. I've tried removing compress integration but does not seem to change anything.

Any tips on what is the proper way to do this?

thanks

I've also tried doing it with

class={`bg-bg-${theme}`}

but with no luck :(

[proud river]

This is how Tailwind works, see this page: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

To be able to extract classes (and know what to generate), every class has to be fully statically analyzable in the source file

[tiny sable]

oh alright, thanks!

[tiny sable]

mhhh this does not work, and it's basically the same as the tailwind doc

[warm saddle]

The main tag still has a dynamic class, maybe that is why?

[tiny sable]

This works! You have to put the full class :D

Thanks