How do I change Button Colors?

How do I set my button colours using the Tailwind CSS configuration? I've created a custom theme and set a new set of CSS variables for the colours I want to substitute for "primary" in tailwind using the pattern

--curiousblue-x

--curiousblue-x

However, no matter how I update the new theme.css file and the tailwind.config.js file, the buttons remain the same colour.

When I look at the button in the DOM inspector it has inline styles:

style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"

style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"

I can force the colours to change by overriding

--primary-x

--primary-x

inside my theme.css file, but this seems a little clunky since it seems to be ignoring the tailwind configuration. Is this the best I can do, or is there a cleaner way to achieve what I'm looking for.

Here's my theme.css:

@import '/vendor/filament/filament/resources/css/theme.css';

@layer base {
    :root {
        --curiousblue-50: 240, 249, 255;
        --curiousblue-100: 224, 242, 254;
        --curiousblue-200: 185, 230, 254;
        --curiousblue-300: 124, 211, 253;
        --curiousblue-400: 54, 190, 250;
        --curiousblue-500: 12, 166, 235;
        --curiousblue-600: 0, 141, 213;
        --curiousblue-700: 1, 105, 163;
        --curiousblue-800: 6, 89, 134;
        --curiousblue-900: 11, 74, 111;
        --curiousblue-950: 7, 47, 74;

        --primary-50: 240, 249, 255;
        --primary-100: 224, 242, 254;
        --primary-200: 185, 230, 254;
        --primary-300: 124, 211, 253;
        --primary-400: 54, 190, 250;
        --primary-500: 12, 166, 235;
        --primary-600: 0, 141, 213;
        --primary-700: 1, 105, 163;
        --primary-800: 6, 89, 134;
        --primary-900: 11, 74, 111;
        --primary-950: 7, 47, 74;
    }
}

@config 'tailwind.config.js';

@import '/vendor/filament/filament/resources/css/theme.css';

@layer base {
    :root {
        --curiousblue-50: 240, 249, 255;
        --curiousblue-100: 224, 242, 254;
        --curiousblue-200: 185, 230, 254;
        --curiousblue-300: 124, 211, 253;
        --curiousblue-400: 54, 190, 250;
        --curiousblue-500: 12, 166, 235;
        --curiousblue-600: 0, 141, 213;
        --curiousblue-700: 1, 105, 163;
        --curiousblue-800: 6, 89, 134;
        --curiousblue-900: 11, 74, 111;
        --curiousblue-950: 7, 47, 74;

        --primary-50: 240, 249, 255;
        --primary-100: 224, 242, 254;
        --primary-200: 185, 230, 254;
        --primary-300: 124, 211, 253;
        --primary-400: 54, 190, 250;
        --primary-500: 12, 166, 235;
        --primary-600: 0, 141, 213;
        --primary-700: 1, 105, 163;
        --primary-800: 6, 89, 134;
        --primary-900: 11, 74, 111;
        --primary-950: 7, 47, 74;
    }
}

@config 'tailwind.config.js';

My Tailwind config is attached.

This is possibly a pretty basic question since but I've been out of the PHP/HTML/CSS space for a long time (probably since about PHP v5.6) and a lot has changed!

message.txt5.77KB