I’m trying to style various elements using the CSS hook classes, and for multiple of them the styles are not applied. I’ll focus on two here.

In my app.css I have:

@tailwind base;
@tailwind components;
@tailwind utilities;

.fi.btn {
    @apply px-5 py-3 text-base rounded-lg;
}
.fi-input {
    @apply border-2 border-slate-200 ring-0 focus:ring-0 hover:border-slate-400 focus:border-sky-500 text-base py-[8px];
}

If I go over the button and inputs now, it seems that text-base is applied, but the others are not.

If I add !important at the end of the classes, or even add ! in front of every class, it still doesn’t work.

Because for some other Filament classes it does work, like for example .fi-modal-heading, my guess is that the issue is that the standard forms classes and styling being applied by the Tailwind forms plugin are not overwritten. I’m not too familiar with how that works, so not sure.