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

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

Customer-Facing Filament - Tailwind Classes Not Compiling

Customer-Facing Filament - Tailwind Classes Not Compiling

Similar Threads

Similar Threads

Similar Threads