What's the correct approach to load filament styles in a frontend page?
I have created a Livewire full page component rendering a form using Filament's form builder as per the docs: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component.
What's the correct approach to load the necessary base styles for the form?
My layout file includes the following section in the head:
However this doesn't seem to be enough as for example focus styles are missing on the input fields.
Solution:Jump to solution
make sure to follow this too
https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css...
5 Replies
Solution
make sure to follow this too
https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css
I always forget the
presets: [preset], part 🙂I wrote this post about using components on frontend https://filamentmastery.com/articles/guide-to-using-filament-components-in-public-facing-pages
Filament Mastery
Guide to using Filament Components in public-facing pages - Filamen...
Learn how to integrate Filament components into your public-facing pages with this step-by-step guide.
Maybe can help you
@Lara Zeus Thank you 🙂 I was aware of this approach but looking for a solution without having to create a tailwind.config.js (tailwindcss v4). I've missed the specific comments on that topic in the docs you've linked. Seems to not be possible before Filament version 4.
Filament uses Tailwind CSS v3 for styling. If your project uses Tailwind CSS v4, you will unfortunately need to downgrade it to v3 to use Filament. Filament v3 can’t support Tailwind CSS v4 since it introduces breaking changes. Filament v4 will support Tailwind CSS v4.