problem in css after upgrading to v4
can someone please help me?
I just upgraded filament to v4, the problem is now the filament style doesn't seems to be working.
I've run npm run build, and no issues there, and ran artisan optimize:clear, still no luck.
I don't have viteTheme in AdminPanelProvider.
What am I missing?
Solution:Jump to solution
yes I did..
finally the css is working again after I added these, inside <head> at my base blade file..
@filamentStyles
@vite('resources/css/app.css')...
18 Replies
weird. Try
php artisan filament:assets
Console errors?yeah, i've run those too..
and this is the status from css file in network tab
did you clear the browser cache?
yes I did, and i've tried hard reload and open in incognito
you created resources/css/filament/panel/theme.css and you have
vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/panel/theme.css'],
refresh: true,
}),
tailwindcss(),
],
});
??
same problem here, I have no custom theme and my styling broke for the whole panel.
Well, you must create one and run Vite
In Filament 4, you almost always NEED custom theme for any CSS styling. Here's my 4-minute video about it: https://www.youtube.com/watch?v=sTYkRuUhjsQ
Filament Daily
YouTube
Filament v4: Tailwind Classes in Blade? You NEED Custom Theme.
A change in Filament 4, related to CSS compilation in your custom Blade files.
Docs: https://filamentphp.com/docs/4.x/styling/overview#using-tailwind-css-classes-in-your-blade-views-or-php-files
More Filament examples on our website: https://filamentexamples.com
Yep, yep, yep, this was the missing thing in the document, Like maybe I should send a pr to add the line : You are going to need custom theme if you have any custom filament page or view that has tailwind css used.
sadly, i've follow the docs to create a custom theme, and no erros after running npm run build, but the result is still the same..
@dyo there should be no errors, "css styles not applied" wouldn't show as an error in browser console or anywhere. So yes it's hard to debug but also it's hard/impossible to say what exactly did you do wrong in your process of following the docs. Have you watched my video?
Solution
yes I did..
finally the css is working again after I added these, inside <head> at my base blade file..
@filamentStyles
@vite('resources/css/app.css')
oh so you had a BASE blade file? Yeah, you didn't explain those details so that's why all we could give you is general recommendations. Anyway, glad it's solved!
thanks for the answer though.. 👍
I'm a fan of your youtube channels..
This looks pretty similar too the Filament default layout. Why did you overwrite this? Or are you not using the Panel?
Yes i'm using the Panel, I still not figured it out why I must do that..
This project is developed in a team..
You shouldn't overwrite the
base.blade.php file.
Because every time something changes in Filament, that file will be outdated and that might break stuff.thanks for the warning..
noted..