F
Filament•17mo 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>
<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],
}
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,
]);
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 ```js import preset from './vendor/filament/support/tailwind.config.preset'...
Jump to solution
3 Replies
Kenneth Sese
Kenneth Sese•17mo ago
Have you followed all the installation instructions for using the Form Builder? https://filamentphp.com/docs/3.x/forms/installation
Installation - Form Builder - Filament
Kenneth Sese
Kenneth Sese•17mo ago
Solution
Ehsan
Ehsan•17mo ago
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',
    ]
}
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',
    ]
}

Did you find this page helpful?