Filament Tailwind Color Picker Laravel Package

Getting Started

First Steps

1. Installation Require the package via Composer:

   composer require happytodev/filament-tailwind-color-picker
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Happytodev\FilamentTailwindColorPicker\FilamentTailwindColorPickerServiceProvider"
   

2. Basic Usage Register the field in a Filament form or table column:

   use Happytodev\FilamentTailwindColorPicker\Fields\TailwindColorPicker;
   
   TailwindColorPicker::make('color')
       ->default('blue-500')
       ->required(),
   

3. First Use Case Add a color picker to a Filament form for a Post model:

   use App\Models\Post;
   use Filament\Forms\Components\TextInput;
   
   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               TextInput::make('title')->required(),
               TailwindColorPicker::make('accent_color')
                   ->label('Accent Color')
                   ->default('indigo-600'),
           ]);
   }
   

Implementation Patterns

Common Workflows

1. Dynamic Defaults Set defaults based on model data or logic:

   TailwindColorPicker::make('theme_color')
       ->default(fn ($record) => $record?->theme_color ?? 'gray-500'),
   

2. Validation & Rules Enforce valid Tailwind colors:

   TailwindColorPicker::make('bg_color')
       ->rules(['required', 'string'])
       ->afterStateUpdated(fn (string $state) => $this->validateColor($state)),
   

3. Table Column Integration Display colors in a table:

   use Happytodev\FilamentTailwindColorPicker\Columns\TailwindColorPickerColumn;
   
   TailwindColorPickerColumn::make('accent_color')
       ->label('Color')
       ->sortable(),
   

4. Customizing Available Colors Restrict to a subset of Tailwind colors:

   TailwindColorPicker::make('primary_color')
       ->colors(['red-500', 'blue-500', 'green-500']),
   

5. Livewire Integration Update UI dynamically:

   TailwindColorPicker::make('live_color')
       ->live()
       ->afterStateUpdated(fn ($state) => $this->emit('colorUpdated', $state)),
   

Advanced Patterns

1. Multi-Field Sync Sync color pickers across related models:

   TailwindColorPicker::make('parent_color')
       ->afterStateUpdated(fn ($state) => $this->syncChildColors($state)),
   

2. Theming Systems Use for dynamic theming:

   TailwindColorPicker::make('theme')
       ->options([
           'light' => 'bg-gray-50 text-gray-900',
           'dark' => 'bg-gray-900 text-gray-50',
       ]),
   

3. Custom CSS Classes Extend with custom classes:

   TailwindColorPicker::make('custom_color')
       ->extraAttributes(['class' => 'w-full h-16']),
   

Gotchas and Tips

Pitfalls

1. Color Format Mismatch

   • Issue: Tailwind expects formats like blue-500, not HEX (#3b82f6).
   • Fix: Use ->formatStateUsing(fn ($state) => $state) to normalize inputs.

2. Missing Config

   • Issue: Colors may not load if tailwind.config.js is misconfigured.
   • Fix: Ensure jit: true in Tailwind config for dynamic colors.

3. Livewire Conflicts

   • Issue: live() may not work if the field isn’t properly bound.
   • Fix: Use ->dehydrateStateUsing() to persist state.

4. Default Values Overwritten

   • Issue: Defaults may be ignored if fillForm is called without data.
   • Fix: Use ->default() with a closure for dynamic defaults.

Debugging Tips

1. Inspect Rendered HTML Check if the field renders correctly:

   php artisan filament:dump-assets
   

   Then inspect the browser’s DevTools for missing assets.

2. Log State Updates Debug live updates:

   ->afterStateUpdated(fn ($state) => \Log::info('Color updated:', ['state' => $state])),
   

3. Validate Tailwind Config Ensure tailwind.config.js includes all needed colors:

   module.exports = {
       theme: {
           extend: {
               colors: {
                   'custom': '#123456',
               },
           },
       },
   };
   

Extension Points

1. Custom Color Palettes Override defaults via config:

   'colors' => [
       'primary' => ['blue-500', 'indigo-600'],
       'secondary' => ['gray-300', 'gray-500'],
   ],
   

2. Localization Translate labels/placeholders:

   ->label(__('filament-tailwind-color-picker::fields.color.label')),
   

3. Plugin Integration Extend with Filament plugins (e.g., add to a panel):

   FilamentTailwindColorPicker::make()
       ->registerPanelColors(['blue-500', 'green-500']),
   

4. Testing Test color fields in PHPUnit:

   $this->get('admin/posts/create')
       ->assertSee('data-testid="tailwind-color-picker"');