Filament•10mo 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()),

                        ]),

7 Replies

awcodes•10mo ago

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

awcodes•10mo ago

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

Themes - Panel Builder - Filament

Jon Mason•10mo ago

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

awcodes•10mo 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 Mason•10mo 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•10mo 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 Mason•10mo ago

makes sense!

Gaming

Programming

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