Filament 4 Style Issues on Livewire Components
I'm having trouble creating a Livewire component that uses Filament forms in Filament 4. The styles just don't show up. I have already imported the styles in the page css:
@import '../../vendor/filament/support/resources/css/index.css';
@import '../../vendor/filament/forms/resources/css/index.css';
@import '../../vendor/filament/schemas/resources/css/index.css';
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php';
@source '../../storage/framework/views/.php';
@source '..//.blade.php';
@source '..//.js';
and I used @FilamentStyles and @FilamentScripts, and still, nothing.
Solution:Jump to solution
I ended up deleting everything and recreating it following the steps you all provided, and it seems to be working now
11 Replies
Did you run npm build?
are you sure the scripts are added to the html? If you put <!-- Filament --> before the call for the styles/scripts do you see it in the browser console?
Yes, I did
Can you check the dev tools whether the CSS files are requested? Also check the actual content of them.
I will check
You need to
@source the filament views too.Shouldn't that be done in Filaments CSS files?
if you look at the css files, it is not. I also believe the sources have to be in the main file that tailwind is using as it's 'config'. https://github.com/filamentphp/filament/blob/4.x/packages/forms/resources/css/index.css
GitHub
filament/packages/forms/resources/css/index.css at 4.x · filamentp...
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire - filamentphp/filament
Wait, we don't need
@sources anymore, as we don't use TW classes directly. So that shouldn't be an issue.you're right. ignore me. lol
Solution
I ended up deleting everything and recreating it following the steps you all provided, and it seems to be working now
The problem was in my vite
Well, thanks for the help, and sorry for the inconvenience