Colors don't work as expected

[Ethanol48]

Describe the bug

Some shades of colors don't work for some reasons, I'm working on a prototype of a custom buttom component for versatility. I was testing the buttom and it works with the color primary, but for some reason the default colors red, blue, green don't work for some shades, like 600.

For some reason when changing the theme to dark of ligth some colors are not available, even if its the same color in ligth and dark mode.

Reproduction

Repo:

I runned the following command and selected sveltekit demo:

npm create svelte@latest

And deleted all the files of the demo.

I went to flowbite and followed the steps for installing the dark mode and setting the primary color palette in https://flowbite-svelte.com/docs/pages/quickstart

For context, where I import tailwind is in a file called styles.css, situated in my $lib folder, this is its contents:

@import '@fontsource/fira-mono';
@tailwind base;
@tailwind components;
@tailwind utilities;

html.dark {
    background-color: rgb(54, 62, 72);
}

Create the component Buttom.svelte in lib folder:

<script>
    import '$lib/styles.css';

    export let color = 'primary';
    export let slate = 0;
    export let classes = `
    text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white 

    bg-${color}-${String(100 + slate)} 
    hover:bg-${color}-${String(200 + slate)} 

    dark:bg-${color}-${String(100 + slate)} 
    dark:hover:bg-${color}-${String(200 + slate)} 

    rounded-lg
    `;

    // focus-within:ring-${color}-400
    // dark:focus-within:ring-${color}-700
</script>

<button class={classes}>
        <slot />
</button>

Create a page with this:

<script>
    import Button from '$lib/Buttom.svelte';
    let slates = [];
    for (let i = 0; i < 800; i += 100) {
        slates.push(i);
    }
</script>

<div class="flex justify-center">
    <div style="margin-top: 100px" class="grid grid-cols-3 gap-3 justify-center">
        {#each slates as slate}
            <div style="width: 300px;" class="grid grid-cols-1 gap-3 dark:text-white text-black">
                <h5>Slate: {slate + 100} and {slate + 200}</h5>
                <ButtonSize {slate} color={'blue'}>Blue</ButtonSize>
                <ButtonSize {slate} color={'green'}>green</ButtonSize>
                <ButtonSize {slate} color={'purple'}>purple</ButtonSize>
                <ButtonSize {slate} color={'red'}>red</ButtonSize>
                <ButtonSize {slate}>Primary</ButtonSize>
            </div>
        {/each}
    </div>
</div>

This is my tailwind.config.js:

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
    ],
    plugins: [require('flowbite/plugin')],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                // flowbite-svelte
                primary: {
                    50: '#fef2f2',
                    100: '#fee2e2',
                    200: '#fecaca',
                    300: '#fca5a5',
                    400: '#f87171',
                    500: '#ef4444',
                    600: '#dc2626',
                    700: '#b91c1c',
                    800: '#991b1b',
                    900: '#7f1d1d'
                    // 950: '#450a0a',
                }
            }
        }
    }
};

It doesn't show it in the system info, but I have FireFox: 124.0.1, but this error it can be seen it chrome and firefox.

Result in my machine:

https://github.com/themesberg/flowbite-svelte/assets/96821054/3f246eb2-2331-417b-9be8-ff2bca6806a9

It's the fist time I work with tailwind in svelte, I think that it migth be a problem in my tailwind configuration or a bug in my code, but no errors appear when building the project.

Flowbite version and System Info

System:
    OS: macOS 14.0
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 87.02 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.7.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
    pnpm: 8.10.2 - ~/.nvm/versions/node/v20.7.0/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 119.0.6045.123
    Safari: 17.0
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.5 
    flowbite-svelte: ^0.44.24 => 0.44.24 
    svelte: ^4.2.7 => 4.2.12 
    vite: ^5.0.3 => 5.2.7

[jjagielka]

Why this problem is here? It is not flowbite-svetle related.

Anyway, read the docs before posting questions: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[shinokada]

I close the issue for now.