Using Tailwind & Livewire outside of Filament...
Hey. Loving Filament 3 and got it all installed.
I want to use Tailwind and Livewire in a public page (no auth, no panel and no Filament).
It seems like reinstalling Livewire and Tailwind in the root is not the right way to go.
Are there any docs on using Tailwind & Livewire in non-filament pages?
Thanks so much in advance. Al
Solution:Jump to solution
If anyone else has this question then this is what I did. (Feel free to correct me)
1. Tested if Livewire works without me doing anything. Created a new component and tried to render in a brand new public layout. It works! Woo!
2. Spent 2 hours reading the docs on assets trying to understand how to incorporate my public facing tailwind styling with Filament. Decided life was too short and just installed tailwind as if the project didn’t already have it. Took 90 seconds and after adding the
@vite() directive to my new public layout it worked like a charm. Woo^2....8 Replies
TALL stack
TALL Stack: Tailwind CSS, Alpine.js, Laravel, and Livewire. One Hap...
Learn more about the newest stack for Laravel developers. Full stack, all in Laravel-inspired syntax.
Hey Leandro. Thansk for the quick reply! So even if I have Filament installed already, I should install TALL seprately in my root so I can use it in public pages? Is that right? (I'm not doubting you - just want to make sure I understand!)
Yes, because you have a different layout and you need to configure livewire, tailwind, etc
Thanks dude!
Solution
If anyone else has this question then this is what I did. (Feel free to correct me)
1. Tested if Livewire works without me doing anything. Created a new component and tried to render in a brand new public layout. It works! Woo!
2. Spent 2 hours reading the docs on assets trying to understand how to incorporate my public facing tailwind styling with Filament. Decided life was too short and just installed tailwind as if the project didn’t already have it. Took 90 seconds and after adding the
—- Is this the right way to go? Probably not. Should you do it this way? Maybe, if you’re looking for a quick and dirty way to get stuff done. Will I learn later that I’m a fool and there’s a far better way? Undoubtably (that describes my entire 6 years using Laravel) Hope this helps someone. And feel free to tell me what I’ve done wrong. I love learning.
@vite() directive to my new public layout it worked like a charm. Woo^2.
3. Realised that I wouldn’t really use Alpine on its own so just didn’t change anything.—- Is this the right way to go? Probably not. Should you do it this way? Maybe, if you’re looking for a quick and dirty way to get stuff done. Will I learn later that I’m a fool and there’s a far better way? Undoubtably (that describes my entire 6 years using Laravel) Hope this helps someone. And feel free to tell me what I’ve done wrong. I love learning.
I've taken the same approach: a separate/bespoke Tailwind install for the couple static pages that need it outside my Filament pages. They're really basic, so quick-and-dirty is fine.
While Livewire and Alpine are (or appear to be as far as I've found) unaltered in Filament and will therefore work as-is for other pages as well, Tailwind is highly customized inside Filament to match Filament's requirements and purge out unused portions.
While I'm sure one could add customizations to it as per the docs instructions, and leverage that outside Filament after hooking into it (loading the assets to the browser), in the app where I needed to support a couple static pages, it wasn't worth doing all of that. (not yet anyway). But there's certainly value in leveraging all of that for the sake of consistency across the entire app.
So that's the long way of saying yes the approach you've taken is fine for now. Until it isn't, ie: when your app dictates the need for tighter integration for the sake of consistency etc.
And that's a perfectly fine approach to building apps: do what's needed until the needs dictate the need for refinements.
Thanks for the advice and for taking the time to reply. Really encouraging to hear this!
FYI - I didn't really want to make another asset pipeline and so I created a "marketing" panel from filament and then did a few things...
1. I removed all references for auth per this doc here: https://filamentphp.com/docs/3.x/panels/users#setting-up-guest-access-to-a-panel
2. I created a page and set the slug to be "/" per this doc here: https://filamentphp.com/docs/3.x/panels/pages#customizing-the-page-url
3. Removed the dashboard entirely per this doc here: https://filamentphp.com/docs/3.x/panels/dashboard#customizing-the-dashboard-page
I'm not really sure how I'm going to like it tbqh, but for my purposes I wanted something quicker and well... it proved to be quicker!