Installing Filament - Laravel Mix asset's wont compile
Sorry in advance if I'm missing something straight forward...
I'm on an existing laravel project and just wanted to test out FIlament Tables, I followed the documentation at: https://filamentphp.com/docs/3.x/tables/installation
1. I ran "composer require filament/tables:"^3.3" -W"
2. Since it is an existing project, I ran "php artisan filament:install --tables"
3. Next, I installed tailwind and its plugins, "npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev"
4. Added tailwind.config.js to root folder with contents:
5. I added tailwind layers to resources/css/app.css here are the contents of that file:
6. I created postcss.config.js in my root directory with the contents:
7. After all this i run and i get this compilation error from my postcss.config.js file.
8. I did publish the assets as well, and ran "php artisan filament:upgrade" to check that, and cleared all my caches and reloaded my laragon environment. I was able to get a filament table to appear but the styles aren't compiled so there are no styles to it.
I'm probably missing something with my js configs but im just not sure what.
24 Replies
I think you are using laravel 12 and have tailwind v4 clashing
How to use Filament with Tailwind CSS v4
Laravel 12 ships with version 4 of Tailwind CSS, while Filament v3 only supports version 3. This guide walks you through setting up Tailwind CSS v3 alongside v4.
Sorry shouldve specified that, here are the versions of my packages im running:
Laravel 10.48.29
composer.json
package.json
Notice it's saying the issue is in:
C:\laragon\www\hsh\postcss.config.js
For example this is the tailwind.config.js which works for me:
What you look like you are doing there is using a filament theme in the laravel root
because if you create a custom theme it should please:
in
resources/css/filament/app/tailwind.config.js
app being the panel name
Sorry if I'm not fully understanding, but Im just trying to use the default themes for now, I assume that tailwind.config.js that you sent is doing that, is there anything else needed for the tailwind config other than what you showed?
and both the postcss.config.js and tailwind.config.js files should be placed at the file root correct?
and in the created postcss.config.js file (in my root) i ONLY have the following:
this is what it shows in the documentation https://filamentphp.com/docs/3.x/tables/installation#!
am I missing stuff for this as well?
Ok apologise, rushing here. That should compile but I think the issue is you are trying to include the preset that won't exist.
Ypu need
import preset from './vendor/filament/support/tailwind.config.preset'
The present you are looking for above is for filament panels
So i just replaced
with:
In my postcss.config.js, and it successfully compiled, (which is farther than ive gotten so far)
Although when reloading my page with my table component, it still doesn't render in the css.
so this would be fine for using the general presets?
Yeah
Do you have any suggestions on how I can troubleshoot the css styles not being present now that i was able to compile all the assets?
I'm not receiving any errors in dev tools, or in my laravel logs, but the styles still don't seem to be applied to my table. I also have the @FilamentStyles (in the header with livewire styles) and @FilamentScripts (in the body with my livewire scripts) in my layout file.
If i look at the elements, i can see the @FilamentStyles are being registered as these 2:
<link href="http://hsh.test/css/filament/forms/forms.css?v=3.3.16.0" rel="stylesheet" data-navigate-track="">
<link href="http://hsh.test/css/filament/support/support.css?v=3.3.16.0" rel="stylesheet" data-navigate-track="">
after some more troubleshooting, i updated my laravel mix (webpack.mix.js) to require tailwindcss through postCss, but it seems like it is overriding the sass option and removing the other styles on our page.
webpack.mix.js:
I suspect it's actually your custom frontend css that's messing with the styling tbh
So look at your vite too? For example my vite for a custom frontend is:
Looks like both your SASS and your CSS file have the same name and will end up as the same file in
public/css
Try renaming your Filament CSS file to filament.css or similar and update your imports.I tried this a little while ago, it seems like it may be an issue with some of my front end styles and the filament styles, as soon as i put this new filament/app.css in our layout, some of our elements disappear. so i believe that toeknee is right. I'm also only using mix for my css bundling.
Im going to try and remove most of our front end styles to test and see if the issue is resolved
🫠
Those should be published by
php artisan filament:assetsah yes sorry, i wanted to start fresh today so im doing a fresh install of tables, let me run that again
yea that fixed the errors, thanks
hmmmmm it definetly is a conflict between my bootstrap styles and tailwind
i removed the 'collapsed' class
and the headers for our navbar came back
Maybe some JS issues?
apparently its just a common naming issue with tailwind and css since they both use some of the same class names
i was able to add a prefix to our tailwind styles and that seemed to fix it.
tailwind.config.js
Hm, and Filament still works? Because we use them without prefix 🤔
Yea the table broke after adding the prefix lol
If you have CSS classes or a framework that conflicts with Tailwind, you probably can't fix this reliably. Sorry.