Filament Form Component, Colors not showing

I have this example of livewire component using Filament Forms but the colors are not working:

class ResetPasswordForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Password Reset')
                    ->description('A password reset link will be sent to your email address.')
                    ->schema([
                        TextInput::make('email')
                            ->required()
                            ->exists()
                    ])
                    ->footerActions([
                        Action::make('submit')
                            ->icon('heroicon-m-check')
                            ->color('danger') # This line of code is not working 
                    ])
                    ->footerActionsAlignment(Alignment::End)
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        dd($this->form->getState());
    }

    public function render()
    {
        return view('livewire.reset-password-form');
    }
}

class ResetPasswordForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Password Reset')
                    ->description('A password reset link will be sent to your email address.')
                    ->schema([
                        TextInput::make('email')
                            ->required()
                            ->exists()
                    ])
                    ->footerActions([
                        Action::make('submit')
                            ->icon('heroicon-m-check')
                            ->color('danger') # This line of code is not working 
                    ])
                    ->footerActionsAlignment(Alignment::End)
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        dd($this->form->getState());
    }

    public function render()
    {
        return view('livewire.reset-password-form');
    }
}

Blade/View file:

    <form wire:submit.prevent="create">
        {{ $this->form }}
    </form>
    <x-filament-actions::modals />

    <form wire:submit.prevent="create">
        {{ $this->form }}
    </form>
    <x-filament-actions::modals />

Livewire Layout:

...
    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="min-h-screen flex flex-col justify-between dark:bg-gray-800 bg-gray-100">
    {{ $slot }}
    @filamentScripts
    @vite('resources/js/app.js')
</body>

...
    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="min-h-screen flex flex-col justify-between dark:bg-gray-800 bg-gray-100">
    {{ $slot }}
    @filamentScripts
    @vite('resources/js/app.js')
</body>

Even the validation errors colors are not showing.

Solution

Solved I forgot to configure tailwind.config.js.
https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css

Installation - Form Builder - Filament

Jump to solution

Filament•16mo ago•

3 replies

Jap

Filament Form Component, Colors not showing

I have this example of livewire component using Filament Forms but the colors are not working:

class ResetPasswordForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Password Reset')
                    ->description('A password reset link will be sent to your email address.')
                    ->schema([
                        TextInput::make('email')
                            ->required()
                            ->exists()
                    ])
                    ->footerActions([
                        Action::make('submit')
                            ->icon('heroicon-m-check')
                            ->color('danger') # This line of code is not working 
                    ])
                    ->footerActionsAlignment(Alignment::End)
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        dd($this->form->getState());
    }

    public function render()
    {
        return view('livewire.reset-password-form');
    }
}

class ResetPasswordForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Password Reset')
                    ->description('A password reset link will be sent to your email address.')
                    ->schema([
                        TextInput::make('email')
                            ->required()
                            ->exists()
                    ])
                    ->footerActions([
                        Action::make('submit')
                            ->icon('heroicon-m-check')
                            ->color('danger') # This line of code is not working 
                    ])
                    ->footerActionsAlignment(Alignment::End)
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        dd($this->form->getState());
    }

    public function render()
    {
        return view('livewire.reset-password-form');
    }
}

Blade/View file:

    <form wire:submit.prevent="create">
        {{ $this->form }}
    </form>
    <x-filament-actions::modals />

    <form wire:submit.prevent="create">
        {{ $this->form }}
    </form>
    <x-filament-actions::modals />

Livewire Layout:

...
    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="min-h-screen flex flex-col justify-between dark:bg-gray-800 bg-gray-100">
    {{ $slot }}
    @filamentScripts
    @vite('resources/js/app.js')
</body>

...
    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="min-h-screen flex flex-col justify-between dark:bg-gray-800 bg-gray-100">
    {{ $slot }}
    @filamentScripts
    @vite('resources/js/app.js')
</body>

Even the validation errors colors are not showing.

Solution

Solved I forgot to configure tailwind.config.js.
https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css

Installation - Form Builder - Filament

Jump to solution

Filament Form Component, Colors not showing

Filament Form Component, Colors not showing

Similar Threads

Similar Threads

Similar Threads