Changing css colour from svelte store

[ItsTerm1n4l]

Hello.
I have a svelte store that is set to a tailwind css class (fill-sky-950) and I have this store subscribed to in my css class and the css updates to this new value but the site doesn't

see it stays black even though in the site inspector it has the new value

More info:
My backend contains colours and the store is set to one of them and so is written to after the site has loaded, if i set the store's value beforehand that colour does work on the site.
so this sets the colour as expected

export const Col1 = writable({
  Colour: "fill-sky-950",
});

whereas if I update the store with a new colour later the css updates but the colour on the site is just black (see my screenshots).
I hope this makes sense
Thank you!

[brunnerh]

Where is the new value coming from?

Tailwind only generates CSS for classes it can detect in the code, otherwise you need to specify possible classes in the safelist.

If the class is e.g. constructed from multiple string parts, try avoiding that so the full name is visible to Tailwind.

[ItsTerm1n4l]

I have made sure the full name is visible.
The value comes from my backend, I use pocketbase, so I have some collections and each collection has records in and each record has a plaintext field with a tailwindcss class like fill-sky-950, and on my site I have a menu where users can select a record from each collection, so the Col1 store is filled from the selected record, and usually I access the stores value using {$Col1.Colour} and this works like this <div class="{$Col1.colour}></div> and the css is updated in the browser inspection tool but the css change does not apply the colour.

[brunnerh]

The database is absolutely not visible to Tailwind, only code.

[ItsTerm1n4l]

Yes, I agree, I just need tailwind to interpret the svelte store literally and as css and update when it is changed.

[brunnerh]

That is not how this works. Tailwind determines classes at build time. You either have to have all possible classes in code somewhere (e.g. only store a code in the DB and resolve the class in code via a mapping) or use the safelist as mentioned.