FilamentF
Filament•2y ago
@nasilemak

Customer-Facing Filament - Tailwind Classes Not Compiling

I've added a Filament Form to my website's frontend. Form works just fine but the tailwind utility classes don't seem to be compiling.

// tailwind.config.js

module.exports = {
    content: [
        './app/**/*.php',
        './resources/**/*.html',
        './resources/**/*.js',
        './resources/**/*.jsx',
        './resources/**/*.ts',
        './resources/**/*.tsx',
        './resources/**/*.php',
        './resources/**/*.vue',
        './resources/**/*.twig',
        './vendor/filament/**/*.blade.php',
    ],
}


<!-- base.blade.php -->
<html>
    <head>
        @livewireStyles
        @filamentStyles
        @vite('resources/sass/app.scss')
    </head>

    <body class="antialiased">
        @yield('body')
        @livewireScripts
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>


I'm able to override the filament styling in my main css file

.fi-fo-field-wrp-label {
   @apply font-bold uppercase;
}

.fi-fo-field-wrp-error-message {
   @apply text-red-600;
}


But ideally, I'd like the default filament styling to work. What might be wrong in my configuration?
image.png
Solution
are you importing the filament tailwind preset?
Jump to solution
Was this page helpful?