FilamentF
Filament•5mo ago
Iven S. | LvckyWorldᶜʳᵉʷ

no default css after creating custom theme

I'am creating a custom page for a ticket system.
In blade i wrote something like this:
<div class="message space-y-4">
    @foreach($this->record->messages as $message)
        <div class="flex items-start">
            <div class="relative max-w-lg bg-blue-400 text-gray-800 rounded-2xl px-5 py-3 shadow-md">
                <div class="message-header flex items-center gap-2 mb-2">
                    <span class="message-sender font-semibold">{{ $message->sender->name }}</span>
                    <span class="message-timestamp text-xs text-gray-500">{{ $message->created_at->toDateTimeString() }}</span>
                </div>
                <div class="message-content">
                    {!! $message->message !!}
                </div>
                <!-- Sprechblasen-Tail -->
                <span class="absolute left-2 -bottom-3 w-0 h-0 border-t-8 border-t-blue-100 border-l-8 border-l-transparent"></span>
            </div>
        </div>
    @endforeach
</div>


Problem: The tailwind classes aren't applied

-> So i wanted to create a custome theme:

I've created a custom theme by running the command:
wodby@php.container:/var/www/html $ php artisan make:filament-theme
Using npm v10.9.1

   WARN  Action is required to complete the theme setup:  

  ⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/acp/theme.css`  
  ⇂ Next, register the theme in the acp panel provider using `->viteTheme('resources/css/filament/acp/theme.css')`  
  ⇂ Finally, run `npm run build` to compile the theme


Than I added the stuff tu vite.config.mjs:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/acp/theme.css'],
            refresh: true,
        }),
    ],
});


I added the theme to the provider:
class AcpPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->viteTheme('resources/css/filament/acp/theme.css')
            ->id('acp')
            ->path('acp')
            ->login()
            ...
    }
}


I've run npm run build:
ivenschlenther@MacBook-Air-von-Iven laravel % npm run build

> build
> vite build

vite v6.1.0 building for production...
✓ 54 modules transformed.
public/build/manifest.json               0.44 kB │ gzip:  0.18 kB
public/build/assets/app-C6G_3qQV.css     0.06 kB │ gzip:  0.06 kB
public/build/assets/theme-Bs9B5NDh.css   0.19 kB │ gzip:  0.15 kB
public/build/assets/app-Xaw6OIO1.js     34.85 kB │ gzip: 14.03 kB
✓ built in 178ms


Problem, the whole CSS is gone (see image)

laravel/public/build/assets/theme-Bs9B5NDh.css says:
@tailwind base;@tailwind components;@tailwind utilities;@tailwind variants;@layer base{:root.dark{color-scheme:dark}[data-field-wrapper]{scroll-margin-top:8rem}}@config "tailwind.config.js";


laravel/resources/css/filament/acp/tailwind.config.js: 
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}


laravel/resources/css/filament/acp/theme.css:
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';


---

Filament v3.3.33
Laravel v11.45.1
PHP 8.4
CleanShot_2025-07-26_at_18.22.462x.png
Solution
Not sure whether it makes a difference, but in my projects (and I think in default Laravel) Tailwind runs via PostCSS. Not directly via Vite.
Jump to solution
Was this page helpful?