Filament•15mo ago

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•15mo 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•15mo ago

Specifically, the layout configuration part: https://filamentphp.com/docs/3.x/forms/installation#configuring-your-layout

Installation - Form Builder - Filament

Solution

Ehsan•15mo ago

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',
    ]
}

Gaming

Programming

Unable to use colors on blade components in livewire form component