Livewire component grid in template does not render as grid col, unless use col-start-*
Hello,
I'm using a custom Livewire component in a Filament form. I'm trying to display a label and a value in a 2 column format using
.grid-cols-2, but it does not render like so (cf. screenshot #1).
If I use .col-start-1 for the label and .col-start-2 for the value, it works, but I think it's not a normal behavior.
Here is the code in my blade template:
Do I miss something?
I tried to install Tailwind as explained in the documentation but nothing changed.
Thank you for your help!
Solution:Jump to solution
Just follow the docs on theming:
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme...
12 Replies
Is that blade file or folder included in the
content option of the tailwind config?
Check grid-cols-2 in the DevTools. Are there any rules applied? If not it's probably missing and you didn't rebuild your TailwindCSS file properlyI don't have a tailwind config because I use the panel builder, and as far as I understand, It's not necessary to install Tailwind. But I'll install it and check in the config file the paths (there was not the path of my livewire component when I tried). Thank you
My app.css file is not "updated". I ran
npm run dev and npm run build.
Here are ./tailwind.config.js and ./resources/css/app.css
My blade component is located here: ./resources/views/livewire/price-grid.blade.php
In my compiled app.css, I can find only md:grid-cols-2, but not grid-cols-2.
I don't have a tailwind config because I use the panel buildeOkay, because you said you set up everything according to the docs and pointed to the "form builder" docs.
It's not necessary to install TailwindNot as long as you don't need custom classes. You should follow the theme docs and create a custom theme.
I set up everything according to the docs of the Form Builder because I thought I could be a solution. But it's clearly not.
I don't need custom theme, I just need to use grid-cols-2, but it's not in the app.css and I can't understand why it's not.
Trust me: You need a custom theme.
Why should it be in app.css? It’s a panel? You aren’t using app.css in the panel.
I made a mistake, it has nothing to do with app.css.
But why do I need a custom theme if I just want to use standard classes of Tailwind?
Because Tailwind only includes the classes you actually use to reduce the build size. When you add new classes you can't use the file from the Filament codebase anymore.
Oh OK, I thought Filament CSS was rebuilt including the classes I use. That makes sense. I'll see how Ican do all of that. Thanks!
I thought Filament CSS was rebuilt including the classes I useThrough which tooling? That would require all the npm packages to be auto-installed on every system and nodejs to be preseent in the right version, ...
I installed npm packages and I ran npm run build, but nothing changed when I did this. But I found this thanks to your message, and I went with a custom theme, it seems to be good now!
Filament
How can I compile new Tailwind CSS classes in a panel? by Dan Harri...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
Solution
Just follow the docs on theming:
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme