Filament•4mo ago

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?

Solution:

are you importing the filament tailwind preset?

Jump to solution

3 Replies

jepewsykes•4mo ago

maybe u forgot to run npm run build

Solution

Dan Harrin•4mo ago

are you importing the filament tailwind preset?

@ryanvelbon•4mo 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

Gaming

Programming

Customer-Facing Filament - Tailwind Classes Not Compiling