Build custom components inside a Filament V3 Panel with Livewire and TailwindCSS

Search for a command to run...

No comments yet. Be the first to comment.
Fun fact, while deep diving how Claude Code works, I realised some files were stored with a .jsonl format! What’s this, a typo?? 😀 Of course not…. It's a text format where each LINE is a valid JSON object. So why this and not just a JSON array?! Reg...

This apply the dependencies transformations needed, and add the PostCSS config file needed. npm remove @tailwindcss/vite npm remove tailwindcss npm install tailwindcss@3 @tailwindcss/forms npm install postcss autoprefixer cat > postcss.config.js ...

Warning: I just deprecated it. Claude Code is fantastic, it does the same job I wanted to achieve with this. It’s a CLI instead of an UI, but it does 10x or 100x more than the current application situation. Get it here: https://docs.anthropic.com/en/...

You're reading this, so you want the Login page ready to go in local environments, without having to type in a default user (configured in your seeder). Let's go. Let's create a Filament Page. Press <enter> for an empty answer, when asked if the page...

I know, Livewire and Tailwind are the base for Filament, and this tutorial is not any hidden gem, but my gut feeling tells me I should write it. It shows few steps of the docs, but many don't get there, and don't even know this is possible.
Filament V3 is a brilliant platform, base, foundation for writing Laravel Applications, with a taste of Low Code, because of the "Legos" ready out of the box, so you assemble your creation quicker than ever!
After this < 5-7 min steps, we are back at writing an app just like we did before with Livewire and TailwindCSS, and "sitting on the shoulder of giants".
Let's go!!
The starting point is a Laravel 10 installation, with a Filament V3 default installation. You must have Node and NPM installed. (If you know your way around PNPM/Yarn you may install the JS dependencies manually)
Let's go to the terminal and run:
php artisan make:filament-theme
This will install the JS dependencies needed (tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer) and take prepare some files.

Like the instructions, add resources/css/filament/admin/theme.css entry to vite.config.js
...
'resources/css/filament/admin/theme.css',
...

And register this theme on the Panel's Provider app/Providers/Filament/AdminPanelProvider.php .
...
->viteTheme('resources/css/filament/admin/theme.css')
...

We're using the default panel. V3 might have multiple. This will override the usage of the default theme, and include our custom build.
Let's add the Livewire folders because we want to use Livewire components in the default location - we might have inline views and view files.
# resources/css/filament/admin/tailwind.config.js
...
'./app/Livewire/**/*.php',
'./resources/views/livewire/**/*.blade.php',
...

Now just run the JS build
npm run build
And that's it!! How simple was this?? You can npm run dev and have hot reloading, instant refresh on code changes!

Of course, you can do this in Widgets, but also in blank Pages where you can build whatever you want, however you want!!
Find below, a custom Counter, using Tailwind classes that aren't in the default admin panel CSS assets.
PS: I just built a new widget, as a plain Livewire component, like so:
php artisan make:filament-widget CounterWidget
And added it to the widgets in the Panel's ServiceProvider:


Enjoy, happy building ❤️