custom select box with tailwind classes

’m working on a Laravel Filament project. In my form, I’m using custom classes like custom-inline-field which I’ve defined in a separate CSS file. But I feel this isn’t the best approach.

Instead, I want to use Tailwind CSS classes only — no external CSS file.

Here’s what I’m trying to achieve:

I want to style all form inputs (like TextInput, Select, etc.) with Tailwind classes like mt-2, text-sm, border-gray-300, etc.

I want to avoid defining custom CSS classes in external files.

Ideally, I want to either:

    Use Tailwind classes inline in each component.

    Or define global styles (via Filament theme or config) so I don’t have to repeat them.

Bonus:

Can I override the Blade view for Select or TextInput component and inject Tailwind classes directly?

What is the recommended way in Filament to apply consistent design without custom CSS files?

Example of what I currently have:

    ->label('Date of birth')
    ->inlineLabel()
    ->extraAttributes(['class' => 'custom-inline-field']);```

I want to replace this custom-inline-field with proper Tailwind styling without relying on an external file.

✅ Please guide me with the best way to do this using Filament + Tailwind.

LaryAI

10 months ago

Level 58

Absolutely! Here’s how you can use only Tailwind CSS classes for styling Filament form components, without relying on external CSS files.

1. Inline Tailwind Classes with `extraAttributes`

You can directly add Tailwind classes to Filament form fields using the extraAttributes method. For example:

TextInput::make('date_of_birth')
    ->label('Date of birth')
    ->inlineLabel()
    ->extraAttributes([
        'class' => 'mt-2 text-sm border-gray-300 rounded-md'
    ])

This will apply the Tailwind classes directly to the input element.

2. Global Styling via Filament Theme (Recommended)

To avoid repeating classes everywhere, Filament allows you to publish and customize its theme. This is the best way to apply consistent styling.

Step 1: Publish Filament’s assets

Run:

php artisan filament:assets

Step 2: Edit the Tailwind config

Open tailwind.config.js and add/adjust your customizations as needed.

Step 3: Override Filament’s form component views (optional)

If you want to override the default Blade views for components like TextInput or Select, you can publish the views:

php artisan vendor:publish --tag=filament-views

Then, edit the relevant Blade files in resources/views/vendor/filament/components/forms/. Add your desired Tailwind classes directly to the input/select elements.

3. Using Filament’s Theme Config (Global Classes)

Filament v3+ allows you to set global classes for form components in your config/filament.php:

'forms' => [
    'components' => [
        'text_input' => [
            'input' => [
                'class' => 'mt-2 text-sm border-gray-300 rounded-md',
            ],
        ],
        'select' => [
            'select' => [
                'class' => 'mt-2 text-sm border-gray-300 rounded-md',
            ],
        ],
        // Add more components as needed
    ],
],

This way, all TextInput and Select components will automatically get these classes.

4. Bonus: Overriding Blade Views

Yes, you can override the Blade views for Filament components as described above. This is useful for advanced customizations, but for most use-cases, the config/global classes approach is easier and more maintainable.

Summary / Best Practice

For one-off customizations: Use extraAttributes(['class' => '...']).
For global, consistent styling: Use the global classes in config/filament.php or override the Blade views.
No need for external CSS files — just use Tailwind classes everywhere.

References: