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.