Missing styles on form within livewire component

Hi All -

Hi there. This is for Filament 4 and Laravel 12. I am attempting to use a filament form in a custom livewire component that is not within a panel (basically a public registration form). I was able to successfully create the form using

php artisan make:filament-livewire-form RegistrationForm

php artisan make:filament-livewire-form RegistrationForm

and the fields display when I hit the route. The issue I am having is that I am not seeing any styles. I have re-ran npm build several times and made sure browser caching is disabled.

layout file is pretty basic:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-white">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @filamentStyles
    @livewireStyles
</head>
<body class="h-full">
    <div class="min-h-full bg-gray-50">
        <nav class="bg-white shadow">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <h1 class="text-xl font-bold text-gray-900">{{ config('app.name') }}</h1>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('register') }}"
                            class="text-blue-600 hover:text-blue-500 font-medium">
                            Register
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>
            {{ $slot }}
        </main>
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-white">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @filamentStyles
    @livewireStyles
</head>
<body class="h-full">
    <div class="min-h-full bg-gray-50">
        <nav class="bg-white shadow">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <h1 class="text-xl font-bold text-gray-900">{{ config('app.name') }}</h1>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('register') }}"
                            class="text-blue-600 hover:text-blue-500 font-medium">
                            Register
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>
            {{ $slot }}
        </main>
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

Thanks in advance!

Solution

Did you add this to your app.css?

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

Jump to solution

Missing styles on form within livewire component

php artisan make:filament-livewire-form RegistrationForm

php artisan make:filament-livewire-form RegistrationForm

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-white">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @filamentStyles
    @livewireStyles
</head>
<body class="h-full">
    <div class="min-h-full bg-gray-50">
        <nav class="bg-white shadow">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <h1 class="text-xl font-bold text-gray-900">{{ config('app.name') }}</h1>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('register') }}"
                            class="text-blue-600 hover:text-blue-500 font-medium">
                            Register
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>
            {{ $slot }}
        </main>
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-white">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @filamentStyles
    @livewireStyles
</head>
<body class="h-full">
    <div class="min-h-full bg-gray-50">
        <nav class="bg-white shadow">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <h1 class="text-xl font-bold text-gray-900">{{ config('app.name') }}</h1>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('register') }}"
                            class="text-blue-600 hover:text-blue-500 font-medium">
                            Register
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>
            {{ $slot }}
        </main>
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

Thanks in advance!

Solution

Did you add this to your app.css?

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

Jump to solution

Missing styles on form within livewire component

Missing styles on form within livewire component

Similar Threads

Similar Threads

Similar Threads