Filament•4mo ago

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•4mo ago

@apply !text-geen-100 Important exists for a reason in css even if it’s frowned upon. Just depends on the specificity.

awcodes•4mo ago

If you set up your theme correctly though .fi-header-heading would be more specific and shouldn’t require important declarations.

@ryanvelbon•4mo 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

Gaming

Programming

How to override default inline styling?