Table individual component css not loading
Hi!
I just installed a fresh laravel 12 installation (livewire starter kit), and installed all individual filament components.
But when i want to load a table, it does not show the css.
Followed these instructions:
https://filamentphp.com/docs/4.x/introduction/installation
Also added @FilamentScripts and @FilamentStyles to body and head.
What could be the issue?
class ShowPlatforms extends Component implements HasActions, HasSchemas, HasTable
{
use InteractsWithActions;
use InteractsWithSchemas;
use InteractsWithTable;
public function table(Table $table): Table
{
return $table
->query(auth()->user()->platforms()->getQuery())
->heading('Platforms')
->description('Check out your platforms below')
->columns([
TextColumn::make('deals')
->default(function (Platform $platform) {
return Deal::where('platform_id', $platform->id)->count();
}),
]);
}
Solution:Jump to solution
Dont know what the problem was. But is was fixed by running:
php artisan filament:install --scaffold
npm install...
4 Replies
Did you run npm run build?
Did you run php artisan storage link?
Check the dev tools. Are the Filament CSS files loaded?
I dont see the css files. But dont know why. This is my sidebar.blade file:
<!DOCTYPE html>
<html lang="{{ strreplace('', '-', app()->getLocale()) }}" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ $title ?? config('app.name') }}</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
@FilamentStyles
@fluxAppearance
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
{{ $slot }} <div> @livewire('notifications') </div> @fluxScripts @FilamentScripts </body> </html> I have added @FilamentStyles and @FilamentScripts
{{ $slot }} <div> @livewire('notifications') </div> @fluxScripts @FilamentScripts </body> </html> I have added @FilamentStyles and @FilamentScripts
Solution
Dont know what the problem was. But is was fixed by running:
php artisan filament:install --scaffold
npm install
npm run dev