F
Filament•11mo 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',
    ],
}
// 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>
<!-- 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;
}
.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?
No description
Solution:
are you importing the filament tailwind preset?
Jump to solution
3 Replies
jepewsykes
jepewsykes•11mo ago
maybe u forgot to run npm run build
Solution
Dan Harrin
Dan Harrin•11mo ago
are you importing the filament tailwind preset?
@nasilemak
@nasilemakOP•11mo ago
Indeed, I was missing these lines in my tailwind.config.js: 
import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {
    presets: [preset],
}
import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {
    presets: [preset],
}
https://filamentphp.com/docs/3.x/actions/installation#installing-tailwind-css Thank you, Dan
Installation - Actions - Filament

Did you find this page helpful?