Add tailwind v4 support to filament

[sohailahmad07]

HI

I have been messing around with Filament to see if I can add support for tailwind v4.

Most of the things are easy; it is just boring work like removing deprecated classes and adding a new one

The one thing that i am tripping over is how to make the whole theme system work i got the color to work, but it has to be defined in CSS and not App service Provider.

So in CSS you would define the color like so

:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    ... All the other colors like gray, danger, etc
    }

And then in your view, you can use it like so

<div class="bg-(--c-500)" /></div>

so can anyone tell me how the whole theme system works and if there is a way to convert it to tailwind v4

[leandrocfe]

Filament V4 will support Tailwind V4

[sohailahmad07]

i know about that i am just trying see if i can add to v3 i have a free weekend and would try that

[sohailahmad07]

P.S. I am fully aware Dan might not even merge for v3, but again, it wouldn't hurt in trying it

[sohailahmad07]

Status Update

I’ve mostly figured it out.

Theme Part

Fortunately, updating the theme for v4 won’t require much work. The steps are:

• Remove tailwind.config.js and replace it with theme.css.
• In theme.css, define the variables like this:
• Import theme.css from the vendor directory into app.css like so @import 'path-to-theme.css' @layer(theme);:

theme.css in the vendor directory:

@theme inline {
  --color-custom-100: rgb(var(--c-100));
  /* Define all other color variables here */
}

app.css will look like this:

@import 'tailwindcss';
@import './theme.css' @layer(theme);

@source '../../app/Filament/**/*.php';
@source '../../resources/views/filament/**/*.blade.php';
@source '../../vendor/filament/**/*.blade.php';

/* Include Laravel's default styles if using the starter kit */

Classes Part

For the second step, we just need to update all Tailwind CSS classes that were removed or changed in v3.

Final Step

The last part will be updating the documentation and installation script for new projects.

I can handle all of this. I just want to know if Dan would be open to merging the PR if I submit it.

[alexandersix]

Hey @sohailahmad07, not Dan, but like @leandrocfe mentioned, we've already got Tailwind 4 working in the Filament v4 branch that we're actively developing, so this is definitely a top priority for us.

However (and Dan & team chime in if I'm incorrect here), the migration from Tailwind 3 to 4 would be considered a breaking change, which we only try to make on major version releases (i.e. Filament v3 -> v4).

Because of that, and because we've already implemented these changes for v4, I imagine that we wouldn't want to add Tailwind 4 to the Filament v3 branch.