© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
5 replies
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
warning
,
danger
danger
etc, but nothing is displayed.

My
tailwind.config.js
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()
boot()
method of
AppServiceProvider
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
filament/filament
panel builder and not installed
form builder
form builder
specifically. Followed this
tailwindcss.config.js
tailwindcss.config.js
configuration and it worked. Thank you.

My
tailwind.config.js
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',
    ]
}
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Form component colors not working in Livewire component
FilamentFFilament / ❓┊help
2y ago
Change Form Colors from Livewire Components
FilamentFFilament / ❓┊help
3y ago
Livewire component in blade template
FilamentFFilament / ❓┊help
2y ago
Livewire component in form
FilamentFFilament / ❓┊help
2y ago