Will v4 support Tailwind 4?

[nathangross]

Tailwind 4 is still in alpha, but seems to be getting fairly close to release. I'm curious if Filament 4 plans to use Tailwind 4 out of the box?

[leandrocfe]

if Filament 4 plans to use Tailwind 4: Yes!

[nathangross]

Anyone using Tailwind 4 (alpha) with Filament 3 currently? Curious if/how you were able to set it up

[nikcani]

I have tried Tailwind 4.0.0 and was not able to set it up with Filament 3.2.135. Either via vite directly or via postcss it seemed to me, that the Filament v3 theme that I import in my custom theme has some conflicting imports. I did not quickly find a solution to get it to work and thus just reverted tailwind.

[zepfietje]

You might want to check out the guide I just published on using Tailwind CSS v3 and v4 side by side: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4

[bdsoha]

Any updates since Tailwind 4 was officially released?

[nathan-io]

I'm also curious if Filament 3 will support Tailwind 4.

We're using Flux UI in our project. Flux is about to release 2.0, which has been rewritten to support Tailwind 4. I'm afraid we won't be able to upgrade if Filament is still locked to Tailwind 3.

[nathangross]

@thdebay The project started with npm, but switched to yarn when I first upgraded to an early Tailwind 4.0 beta. I hadn't used yarn much before, but it seemed to support separate modules in separate workstations. It worked pretty well until one of the beta updates. Something in the update broke my setup and I could never figure out what it was. We were kind of stuck on an early beta until I decided to try PNPM. It works well and I've been using that since.

While both Yarn and PNPM support workspaces, PNPM seems to fully isolate all the node modules (yarn only seems to keep separate what it thinks should be separate—or something, not really sure 🤷‍♂️)

One semi pain point in our setup: while I can run pnpm run build --watch for both our frontend and backend simultaneously, I can't seem to get npm run dev to run simultaneously. Seems to be something with the Vite server. Might be a way to configure that but I have not found it.

So our current scripts look like this:

        "dev": "concurrently \"pnpm run watch:frontend\" \"pnpm run watch:admin\"",
        "build": "concurrently \"pnpm run build:frontend\" \"pnpm run build:admin\"",
        "watch": "concurrently \"pnpm run watch:frontend\" \"pnpm run watch:admin\"",
        "clean": "rm -rf node_modules && rm -rf packages/*/node_modules",
        "dev:frontend": "vite --config vite.frontend.config.js",
        "dev:admin": "vite --config vite.admin.config.js",
        "build:frontend": "vite build --config vite.frontend.config.js",
        "build:admin": "vite build --config vite.admin.config.js",
        "watch:frontend": "vite build --watch --config vite.frontend.config.js",
        "watch:admin": "vite build --watch --config vite.admin.config.js",

Let me know if you run into anything and I can try to help out

[thdebay]

The overall idea makes sense @nathangross but I admit the details of the implementation are still a little confusing to me. How do you load the right assets for Filament and for the frontend? Did you add a route-based condition in your entrypoint blade file?

[zepfietje]

For anyone still looking to use Tailwind CSS v3 and v4 in the same Laravel application, I just wrote a guide: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4.

@nathangross, I also explain how to update the build and dev commands to compile both v3 and v4 simultaneously.

Just mention me here if you have any questions! 😊

[MuhamadSelim]

For anyone still looking to use Tailwind CSS v3 and v4 in the same Laravel application, I just wrote a guide: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4.

@nathangross, I also explain how to update the build and dev commands to compile both v3 and v4 simultaneously.

Just mention me here if you have any questions! 😊

you are My Hero

[nathangross]

I finally got around to getting a post up about my setup as well: https://nathangross.me/blog/using-filament-v3-with-tailwind-css-v4-a-pnpm-workspaces-approach/

[tedslittlerobot]

Just updating this thread as i was looking for this info. The 4.x filament branch has tailwind 4.x in its package.json, so it looks highly likely

[jhoanborges]

+1

[tedslittlerobot]

Further update to this thread - this is now on the official docs repo for Filament 3:

https://filamentphp.com/docs/3.x/actions/installation#installing-tailwind-css

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.

tldr: filament 3 -> tailwind 3, filament 4 -> tailwind 4

[zepfietje]

You can use both versions of Tailwind CSS side by side though if your app uses v4 outside Filament: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4

[miztizm]

[donnyxray]

FilamentPHP 4 should've been an update to TailwindCSS 4 only. That would've done it in 2-3 days, a week tops. New features could then have gone into 4.1.

Unfortunately I ended up removing FilamentPHP from my front-end. It's a mix or Flux and my own components now. Still using FilamentPHP on the backend, with its default precompiled TailwindCSS to keep things simple.

[nathangross]

Adding a top level note here in how I was able to get tailwind 4 and filament 3 working well. I think this is the most robust, reliable way to manage it. https://nathangross.me/blog/using-filament-v3-with-tailwind-css-v4-a-pnpm-workspaces-approach/