© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
6 replies
@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
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
text-green-100
would get overridden by the inline
text-gray-950
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
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Override default authorization logic
FilamentFFilament / ❓┊help
3y ago
How to override filament default form data store method
FilamentFFilament / ❓┊help
2y ago
How to add inline() to TextInput?
FilamentFFilament / ❓┊help
2y ago
Section label doesnt override default value
FilamentFFilament / ❓┊help
15mo ago