Styling in a Livewire Form
I've recently upgraded from v2 to v3, but the styling in the Livewire form was wonky before that. It was just usable, now it's not.
In the Filament Admin Panel, the form displays nicely (image 1). In my Livewire component, not so much (image 2).
It gets worse if I try to put a FIle Upload control into a Livewire form. Instead of the beautiful and drag & drop interface, I get the browser's select file button and a mess of other text.
When I inspect the elements in the browser, the class names of the controls labels, divs, etc., seem to be consistent between those very different looks.
I'm sure I've missed a step or dependency somewhere. Unfortunately, after some internet searching and reading similar issues on this Discord, I'm fresh out of ideas of places to look.
Solution:Jump to solution
I found it. This was an upgrade from Laravel 9, Tailwind 2, and Filament 2 to Laravel 10, Tailwind 3, and Filament 3.
There were changes that I needed to make to my tailwind.config.js file to reference the Filament presets. I may have missed that piece all the way back to the old version.
Like I said, the styling classes were there, they just weren't applying. Now they are....
7 Replies
Use filament assets like
<x-filament::input type="text"></x-filament::input>I'm pretty sure I already am, because I'm following the Filament docs to build the form. Sample code for the first 3 fields:
TextInput::make('attendee')
->required()
->label('Attendee Name')
->columnSpan(['sm' => 2])
->autofocus()
->helperText('We need your real name here, first and last, to ensure campground security will let you into the campground.'),
TextInput::make('email')
->email()
->autocomplete()
->required()
->rules(['email:rfc,dns']),
TextInput::make('phone')
->required()
->autocomplete()
->tel(),
You have other layout for you Livewire component?
That was from the Livewire component. The Livewire and Filament Admin Panel code is very similar.
It obviously displays the fields, but it doesn't bring in the classes like I expect.
Need to figure out why it's not bringing in the classes.
Bumping this for help. Still can't figure out how to get a Livewire component that leverages Filament forms to style accurately. The styles are in the HTML elements, but they're not displaying as if the CSS is loading / recognized.
You did recompile your assets?
And your tailwind.config includes the files you are using TW classes inside?
I constantly run NPM BUILD.
My tailwind.config includes the files I've included the Filament assets in. The non-Filament is styled as expected. Some of the Filament stuff is styled as expected; some isn't.
Solution
I found it. This was an upgrade from Laravel 9, Tailwind 2, and Filament 2 to Laravel 10, Tailwind 3, and Filament 3.
There were changes that I needed to make to my tailwind.config.js file to reference the Filament presets. I may have missed that piece all the way back to the old version.
Like I said, the styling classes were there, they just weren't applying. Now they are.