How to Update Tailwind CSS to v4 in Next.js 15 App Router

Tailwind CSS just dropped version 4, and if you're using Next.js 15 with the App Router, you might be wondering how to upgrade smoothly. Don't worry—I've got you covered. Let's walk through the update step by step.

Why Upgrade to Tailwind CSS v4?

Tailwind v4 brings performance improvements, better tree-shaking, and a few breaking changes. Updating ensures your project stays up to date and benefits from the latest features and optimizations.

Step 1: Update Tailwind CSS

First, open your terminal and run the following command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Or if you're using Yarn:

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

This will install the latest Tailwind CSS along with PostCSS and Autoprefixer.

Step 2: Update Tailwind Config

Tailwind v4 removes support for CommonJS config files, so you need to update your tailwind.config.js to tailwind.config.ts:

1. Rename tailwind.config.js to tailwind.config.ts
2. Update the file like this:

import { defineConfig } from "tailwindcss";
 
export default defineConfig({
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

Step 3: Update postcss.config.js

Tailwind v4 requires PostCSS 8+, so make sure your postcss.config.js file looks like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Step 4: Check for Breaking Changes

Some class names and configurations have changed. If your build breaks after updating, check the Tailwind CSS v4 release notes for any breaking changes that might affect your project.

Step 5: Restart Your Dev Server

After making these updates, restart your development server:

npm run dev

or

yarn dev

Now, your Next.js 15 project should be running with Tailwind CSS v4!

Conclusion

Updating Tailwind CSS to v4 in a Next.js 15 project with the App Router is pretty straightforward. Just update the dependencies, adjust your config files, and check for any breaking changes. Now you're all set to use the latest Tailwind features!