F
Filament•11mo ago
@nasilemak

How to override default inline styling?

For example headings have the following default styling fi-header-heading text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl dark:text-white The following would successfully change the background color but would fail to customize the text color since text-green-100 would get overridden by the inline text-gray-950 
@layer components {
    .fi-header-heading {
        @apply bg-red-500 text-green-100;
    }
}
@layer components {
    .fi-header-heading {
        @apply bg-red-500 text-green-100;
    }
}
Solution:
@apply !text-geen-100 Important exists for a reason in css even if it’s frowned upon. Just depends on the specificity....
Jump to solution
3 Replies
Solution
awcodes
awcodes•11mo ago
@apply !text-geen-100 Important exists for a reason in css even if it’s frowned upon. Just depends on the specificity.
awcodes
awcodes•11mo ago
If you set up your theme correctly though .fi-header-heading would be more specific and shouldn’t require important declarations.
@nasilemak
@nasilemakOP•11mo ago
Could you elaborate more on this? Here is my setup 
@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@layer components {
    .fi-btn {
        @apply bg-yellow-500;
    }

    .fi-header-heading {
        @apply bg-red-500;
    }

    .fi-section-content {
        @apply bg-green-500;
    }
}
@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@layer components {
    .fi-btn {
        @apply bg-yellow-500;
    }

    .fi-header-heading {
        @apply bg-red-500;
    }

    .fi-section-content {
        @apply bg-green-500;
    }
}
in my panel provider 
->viteTheme('resources/css/filament/seller/theme.css')
->viteTheme('resources/css/filament/seller/theme.css')
this works nicely

Did you find this page helpful?