© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
3 replies
ChickenDev

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
Solution
https://filamentphp.com/docs/3.x/support/colors#customizing-the-default-colors
Colors - Core Concepts - Filament
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

How do you change button order?
FilamentFFilament / ❓┊help
3y ago
V4 button text colors
FilamentFFilament / ❓┊help
6mo ago
Change Dark Theme Colors
FilamentFFilament / ❓┊help
3y ago
How do i change SubNavigation Label?
FilamentFFilament / ❓┊help
11mo ago