How to use Filament with Tailwind CSS v4

Install Tailwind CSS v4 under a different name

To use version 3 of Tailwind CSS alongside version 4, we’re going to install version 4 under a different name, a so-called alias. This makes it easier to use both versions side by side without having to make any changes to Filament’s use of Tailwind CSS v3. Run this command to install version 4 of Tailwind CSS as “tailwindcss-v4”:

npm install tailwindcss-v4@npm:tailwindcss@4 --save-dev

Your package.json file should now contain something like this:

"devDependencies": {
    "tailwindcss-v4": "npm:tailwindcss@^4.1.4",
}

Since we changed the name of the “tailwindcss” dependency to “tailwindcss-v4”, all CSS files that import Tailwind CSS should be updated:

@import 'tailwindcss';
@import 'tailwindcss-v4';

Install Tailwind CSS v3

Now we can safely downgrade the non-aliased version of Tailwind CSS to version 3:

npm install tailwindcss@3 --save-dev

Both Tailwind CSS v4 and v3 are now installed in your application as “tailwindcss-v4” and “tailwindcss” respectively.

Configure Vite

The existing Vite config in your application that’s set up to use Tailwind CSS v4 will continue to work as is. We do need to create a new Vite config file for Filament that uses Tailwind CSS v3. Create a “vite.config.filament.js” file in the root directory of your application with the following contents:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    plugins: [
        laravel({
            input: [],
            refresh: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss(),
                autoprefixer(),
            ],
        },
    },
    build: {
        outDir: 'public/build/filament',
    },
});

This Vite config sets up Tailwind CSS v3 using its PostCSS plugin. The output directory is set to a separate build directory for Filament. We’ll add the Filament stylesheet to the input array of the Laravel plugin later.

Update build commands

In order to build both the part of your application that uses Tailwind CSS v4 as well as the part that uses Filament with Tailwind CSS v3, update the build commands in your package.json file:

"scripts": {
    "build": "vite build",
    "build": "vite build && vite build --config vite.config.filament.js",
    "dev": "vite"
    "dev": "concurrently \"vite\" \"vite --config vite.config.filament.js\""
},

Create theme stylesheet

After installing any missing Tailwind CSS and PostCSS dependencies, we’re ready to create the CSS file for our theme or custom styles. This may be done by running the install command if you’re using a theme package (e.g. Filament Minimal Theme):

php artisan filament:install --minimal-theme

Alternatively, if you’d like to compile custom styles instead of a premade theme, you may run:

php artisan make:filament-theme

Make sure to add the stylesheet path to the “input” array in your “vite.config.filament.js” file instead of “vite.config.js”:

laravel({
    input: [],
    input: ['resources/css/filament/admin/theme.css'],
    refresh: true,
}),

Also, reference the custom build output directory when registering the theme in your panel provider file:

->viteTheme('resources/css/filament/admin/theme.css', 'build/filament')

Finally, we should remove the “postcss.config.js” file that was automatically created, as PostCSS is already configured in the Vite config file.

Build assets

You can now run “npm run build” to build both the Tailwind CSS v4 part of your app and the Filament part that uses Tailwind CSS v3.

Need help?

If you’ve purchased a theme from the Filament Themes website, please reach out to zep@filamentthemes.com if you’re running into any issues when installing the theme in your application.

Looking for assistance in setting up your custom styles and build configuration in your Laravel and Filament application? Feel free to book a pairing session to get private help on a call.