FilamentF
Filament•3y ago
Ehsan

Unable to use colors on blade components in livewire form component

I have created a livewire form component using docs from https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component
Inside the component, I am using a filament blade component like this
<x-filament::button color="success">
    New user
</x-filament::button>

The problem is, that the button is rendered, without background color / border. The text is rendered in white properly though. I tried with other variants like warning, danger etc, but nothing is displayed.

My tailwind.config.js looks like this
import colors from 'tailwindcss/colors'
import forms from '@tailwindcss/forms'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php'
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    darkMode: 'class',
    plugins: [forms],
}


The buttons are displayed correctly in the admin panel though.

I also tried to register the colors in boot() method of AppServiceProvider , but no result
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
 
FilamentColor::register([
    'danger' => Color::Red,
    'gray' => Color::Zinc,
    'info' => Color::Blue,
    'primary' => Color::Amber,
    'success' => Color::Green,
    'warning' => Color::Amber,
]);
Adding a form to a Livewire component - Form Builder - Filament
Solution
I was using filament/filament panel builder and not installed form builder specifically. Followed this tailwindcss.config.js configuration and it worked. Thank you.

My tailwind.config.js file looks like this now
import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ]
}
Jump to solution
Was this page helpful?