Filament Form Component, Colors not showing
I have this example of livewire component using Filament Forms but the colors are not working:
Blade/View file:
Livewire Layout:
Even the validation errors colors are not showing.
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
https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css
