TailwindCSS v4 Is Here! Upgrade Your Project with These Steps

Published on Mar 12, 2025

With the release of TailwindCSS v4, I've been eager to upgrade my developer blog. Currently, the blog runs on Filament v3 and uses TailwindCSS v3.

After briefly skimming through the documentation, there don’t seem to be many significant differences between v3 and v4.

Fortunately, the Tailwind team has made the upgrade process incredibly straightforward.

Installation

Let's start by running the TailwindCSS upgrade tool. Keep in mind that you need to be using Node.js version 20 or higher for the tool to function correctly.

npx @tailwindcss/upgrade

Could not load the configuration file: b is not a function (Error)

If during the upgrade you encounter an error, it's likely due to issues processing your plugins. According to the documentation, the way plugins are imported has changed. Additionally, some plugins may not be compatible with TailwindCSS v4.

To resolve this, remove all plugins from your Tailwind config file and rerun the upgrade tool with the force flag. We will add these back in a later step.

npx @tailwindcss/upgrade --force

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    darkMode: "selector",
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
-    plugins: [
-        require("@tailwindcss/typography"),
-    ],
}

Vite Plugin (Optional)

During the upgrade process, you have the option to remove the PostCSS plugin and switch to the native Vite plugin.

To do this, simply install the TailwindCSS Offical Vite plugin.

npm install @tailwindcss/vite --save-dev

Then modify your vite.config.js file to include the TailwindCSS plugin.

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
+import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
+        tailwindcss(),
    ],
});

You can now delete the postcss.config.js file and remove the PostCSS package using the command below:

npm uninstall postcss

Install Tailwind Forms Plugin

Once the upgrade is complete, we can re-add our plugins. Since I am using Filament, I will reinstall the forms plugin.

Simply run the command below to install it:

npm install @tailwindcss/forms

Then declare your plugin in your app.css file.

@import 'tailwindcss';

+ @plugin '@tailwindcss/forms';

@config '../../tailwind.config.js';

Upgrade Complete

Congratulations! You have successfully completed the TailwindCSS v4 upgrade. You should now be ready to run npm run build and celebrate a job well done.