Filament•6mo 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•6mo ago

Anyone have suggest for me?

Vp•6mo ago

Did you compile your assets by running npm run dev?

iqbalmahatmaputraOP•6mo ago

absolutely

iqbalmahatmaputraOP•6mo ago

iqbalmahatmaputraOP•6mo ago

the text should be blue

Vp•6mo ago

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

Ye Thi Ha Htwe•6mo 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•6mo 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•6mo ago

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

Vp•6mo 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•6mo ago

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

iqbalmahatmaputraOP•6mo ago

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

Ye Thi Ha Htwe•6mo 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