Filament•15mo ago

Custom View field doesn't recognize css changes???

Really confused as to why my custom view field won't recognize any CSS changes. I was trying to add padding originally and couldn't figure out why it wasn't changing at all.. So I removed everything to where I literally just have <div class="bg-red-700">Text</div> in my view, and it doesn't show the background. Why would that be? here's my class:

class ContactCard extends Component
{
    protected string $view = 'filament.forms.components.contact-card';

    protected array $items = [];

    public static function make(): static
    {
        return new static();
    }

    public function items(array $items): static
    {
        $this->items = $items;

        return $this;
    }

    public function getItems(): array
    {
        return $this->items;
    }
}

class ContactCard extends Component
{
    protected string $view = 'filament.forms.components.contact-card';

    protected array $items = [];

    public static function make(): static
    {
        return new static();
    }

    public function items(array $items): static
    {
        $this->items = $items;

        return $this;
    }

    public function getItems(): array
    {
        return $this->items;
    }
}

and my view file:

@foreach ($getItems() as $item)
    
    <div class="bg-red-700">Text</div>

@endforeach

@foreach ($getItems() as $item)
    
    <div class="bg-red-700">Text</div>

@endforeach

and within my form:

 Tab::make('Contacts')
                        ->schema([

                            ContactCard::make('contacts')->items(User::all()->pluck('first_name', 'id')->toArray()),

                        ]),

 Tab::make('Contacts')
                        ->schema([

                            ContactCard::make('contacts')->items(User::all()->pluck('first_name', 'id')->toArray()),

                        ]),

9 Replies

awcodes•15mo ago

You’ll need to make a custom theme if you want to use tailwind classes that are not part of Filament.

awcodes•15mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Jon MasonOP•15mo ago

ok, so even to do something like adding margin to a div, I need a custom theme?

awcodes•15mo ago

if you want to use tailwind, then yes. That's just how tailwind works. you're of course still free to use vanilla css. 🙂

Jon MasonOP•15mo ago

ok, maybe I need to brush up on tailwind a bit. Have used primarily bootstrap in the past and was kind of looking at tailwind as if it functions the same way, but I guess there are more than a few differences..

awcodes•15mo ago

yea, tailwind has a build step so it can build up the final css file based on the classes it sees in the files you tell it to scan. this keeps the stylesheet as small as possible. other wise it'd be like a 10MB file. 🙂

Jon MasonOP•15mo ago

makes sense!

BKF Dev•5mo ago

Dear @awcodes could you please show us the code how to use custom theme (using make:filament-theme) for custom field ?

awcodes•5mo ago

Nothing to show. After making the theme you just have to make sure the views are in the theme’s tailwind.config.js. Then build the assets.

Gaming

Programming

Custom View field doesn't recognize css changes???