Blade Components
I just started out working on blade components under core concepts in filament 3. My problem is that I'm trying to have a flex in row direction but it doesnt seem to work
<x-filament-panels::page class="flex flex-col grid">
<x-filament::section class="w-1/4">
<x-slot name="heading">
Message List
</x-slot>
Content
</x-filament::section>
<x-filament::section class="w-3/4">
<x-slot name="heading">
Message Body
</x-slot>
Content
</x-filament::section>
</x-filament-panels::page>
Solution:Jump to solution
Got it working, used a custom layout instead of using <x-filament-panels::page>
14 Replies
If you are using Tailwind CSS classes that are not already used in Blade files, you should create a custom theme
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
I am already using a custom theme
$panel->viteTheme('resources/css/filament/admin/theme.css');
did you update your content configuration in tailwind.config.js to also scan for classes inside this directory?
Yes i have
could you share a screenshot with the result please?
Here
What should it be?
I think this is showing exactly your code...
Sorry, the flex direction should be row but the sections are still as shown in the screenshot
There doesn’t seem to be a Filament issue, but I believe that configuring a custom theme will allow the new Tailwind classes to be applied. I recommend reviewing your code..
Let me do that
Also, flex and grid don’t work together. 🙂
This works, but had to do it in dev tools
Solution
Got it working, used a custom layout instead of using <x-filament-panels::page>
That component contains way more than one element. So your classes were applied to the wrong element. They get applied to the root element but you expected them to be applied to the element closest to the slot.