How to use @apply with !important in Tailwind CSS v4 for changing Laravel Filament background?

[Leonard0912]

Hi everyone,

I’m trying to customize the background color of my Laravel Filament panel using Tailwind CSS v4. I want to use the @apply directive in my CSS to apply Tailwind utility classes, but I need the styles to be marked as !important because Filament’s default styles are quite specific.

Is there a way to use @apply with !important in Tailwind CSS v4? Or a recommended approach to force the background color change with Tailwind utilities inside my CSS?

Thanks in advance for any advice or examples!

[wongjn]

You should be able to use the same syntax as class names for the !important flag in your CSS:

.foo {
  @apply bg-red-500!;
}

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701