matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS
https://smeltejs.com/
MIT License
1.53k stars 114 forks source link

Colors don't work. #254

Open monomadic opened 3 years ago

monomadic commented 3 years ago

I know the title sounds vague, but it's true. Using a color/bg class doesn't work in smelte, even the sample documentation at https://smeltejs.com/color for color doesn't work, where they suggest using a class like so:

<div class="bg-deep-purple-500 text-white p-4">This div is deep purple.</div>

And the corresponding live example fails to show a purple background, right there in any browser. Something must be wrong in the compilation stage.

image

In order to test this was smelte and not tailwind, I created a new project using tailwind and had colors working in minutes.

My first thought was something to do with pruning, but I'm using development (no pruning). If I add custom colors to rollup.config.js, the appear as css variables, but aren't shown in the relevant .bg-* and .color-* classes.

Since this same issue is happening in the smelte documentation examples, I doubt it's just me.

Oh, and the documentation reads: image

Which immediately made me thought I could override tailwind.config.js in some way - but this doesn't appear possible either.

Gutting smelte from this same project and just using tailwind works.