Rendering dynamic colors

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.

MIT License

4.97k stars 316 forks source link

Current Behavior

<script>
    const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error'];
    const shades = [
        '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'
    ];
</script>

<div class="flex">
    {#each colors as color}
        <div class="container flex-col justify-center m-auto w-[80%] h-4 gap-1">
            <div class="text-center border">{color}</div>

        {#each shades as shade, index}
            <div class="bg-primary-{shade}-{shades[shades.length - index - 1]} w-full h-full}">{shade}-{shades[shades.length - index - 1]}</div>
        {/each}
        </div>
    {/each}
</div>

Above is a "ColorPalette" component it uses a some each loops to go through and list each color with the dynamic dark/light mode tags. The code applies the correct classes but the colors do not show up.

But,

if I add the shade statically inside of the component or in the page/layout the component is loaded in then it will load that color,

so for example if I added this line to my layout or page or ColorPalette component

<div class="bg-primary-600-400 bg-primary-300-700"></div>

It will then render the colors for [primary-600-400] and [bg-primary-300-700] inside of the color palette.

Expected Behavior

Running the code above I expected to generate a color palette that shows all the colors dynamically based on dark/light mode.

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

I am a jr. dev and this is my first time ever reporting an issue like this, ever.

Please let me know if I could have done anything better.

Hey @ryanott01, this is a common issue folks run into when they are new to Tailwind. But Tailwind does not support dynamically constructed classes. See here:

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Think of it like this, Tailwind's config file content denotes what files Tailwind should check throughout your project. It scans each file and looks for class names it's aware of - but they must be verbatim. Any class it recognizes gets appended to the generated stylesheet, which is then used to style your page.

Tailwind of course comes with it's own set of utility classes built in, so it's aware of those, you can extend Tailwind's utilities using the config, and of course through plugins (like Skeleton).

If you wish to do something like this, you'll need to create your data structure using whole class names. I handle this for our color palette previews like so:

Hope that helps!

skeletonlabs / skeleton