F
FilamentEhsan

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,
]);
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'...
Adding a form to a Livewire component - Form Builder - Filament
Kenneth Sese
Kenneth Sese•264d 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•264d ago
Solution
Ehsan
Ehsan•264d 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',
    ]
}
Want results from more Discord servers?
Add your server
More Posts
Table header actions not showing in view pageHow do you show the `headerActions` of a relation manager inside a view page resource? It only showsComponent not found after changing a ->live() elementHello, i have created a full page component which uses a form and a select live field to conditionalCustomize modal width in simple resource default create and edit actionIs it possible to change the modal width inside of resource's form static method?How to use Livewire Component in Custom Page ?Im Simply tryna use Livewire component in my filament custom page, but i get (second img) "Livewiraction method not working on a standalone ActionI have the following code and the `action` method doesn't get executed. ```php Action::make('addToCaTextColumn placeholder emptyHi! I've got an app I just upgraded from v2 to v3. I've got most of the kinks worked out, but one sCreate action in simple resource as slideoveris there a way to change in the simple resource the create action instead a modal use a slideoverCustom Page with Form BuilderHello Guys, I'm testing the Custom Page and i have a problem with the Repeater Component. It's simpSpatieMediaLibrary Image upload weirdnessI am building a user maintenance form which includes the ability to upload 3 profile images. The imgetTableRecordKey(): Return value must be of type string, nullI suddenly get this error: Filament\Resources\Pages\ListRecords::getTableRecordKey(): Return value mCreating multiple record based on other recordhow can i create a record in other table (credit) when created a record in table (payment) here alsoFileUpload not saving cropped image - v3 BUG?Hello, any file upload experts available? I'm using V3 and using fileUpload for what it is... nothi