Filament•5mo ago

Infolist extraAttributes didn't work for tailwindcss

I can't change my color or css using the tailwindCSS class. I have done according to the documentation https://filamentphp.com/docs/3.x/infolists/installation#installing-tailwind-css Here is my code

    public static function infolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                Section::make([
                    Grid::make(2)->schema([
                        ImageEntry::make('course_photo')
                            ->hiddenLabel(),
                        TextEntry::make('course_name')
                            ->extraAttributes(['class' => 'text-lg text-blue-500 font-bold'])
                            ->hiddenLabel(),
                    ]),
                ]),

            ]);
    }

Installation - Infolist Builder - Filament

13 Replies

iqbalmahatmaputraOP•5mo ago

Anyone have suggest for me?

Vp•5mo ago

Did you compile your assets by running npm run dev?

iqbalmahatmaputraOP•5mo ago

absolutely

iqbalmahatmaputraOP•5mo ago

iqbalmahatmaputraOP•5mo ago

the text should be blue

Vp•5mo ago

Are you trying to display inside panel (filamentPHP) or separate TALL stack infolist builder?

Ye Thi Ha Htwe•5mo ago

Hi, for your styling attributes, you can just simply use:

TextEntry::make('course_name')
    ->size(TextEntry\TextEntrySize::Large)
    ->color('info')
    ->weight(FontWeight::Bold),

TextEntry::make('course_name')
    ->size(TextEntry\TextEntrySize::Large)
    ->color('info')
    ->weight(FontWeight::Bold),

https://filamentphp.com/docs/3.x/infolists/entries/text#customizing-the-text-size

Text entry - Infolist Builder - Filament

iqbalmahatmaputraOP•5mo ago

I want to change the style of my infolist in Resource. Thanks for your suggestion, I think by using extraAttributes, we have more freedom to change the appearance using TailwindCSS.

iqbalmahatmaputraOP•5mo ago

Is it possible to create a view with action buttons using only Infolist? Or do you have any suggestions?

Vp•5mo ago

It looks like you're using admin panel, so you have to create a custom theme like this and follow the instruction.. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme The link in OP is for using infolist as a standalone (outside of panel)..

Themes - Panel Builder - Filament

Ye Thi Ha Htwe•5mo ago

Yes it is. You're going to need to create a theme for that.

iqbalmahatmaputraOP•5mo ago

okeey Thank you very much guys!! @Ye Thi Ha Htwe @Vp

Ye Thi Ha Htwe•5mo ago

For your reference, Porvilas has created a video for this. https://www.youtube.com/watch?v=DrR6tfVYZsQ

Filament Daily

YouTube

Filament: Change CSS Styles with Custom Theme

Answering a question about how to customize login/register page, but with a broader concept that you can apply to any other pages. Docs: - Style customization: https://filamentphp.com/docs/3.x/support/style-customization - Creating a custom theme: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Gaming

Programming

Infolist extraAttributes didn't work for tailwindcss