Tailwind CSS v4 was officially released on January 23.
Along with its major changes, it brings even better performance and usability.

• Builds up to 100x faster
• Minimal installation and configuration code
• Makes full use of modern CSS features (@layer, @property, color-mix(), and more)
• Support for container queries, 3D transforms, and a new color system
• More intuitive customization, configured directly in CSS without JS

When you create a new project with the latest Next.js 15, Tailwind CSS v4 is applied by default.
If you want to use Tailwind CSS v4 in an existing Next project, set it up with the following steps.

First, install each package at its latest version.

1
npm i -D tailwindcss@4 postcss @tailwindcss/postcss

Change the option name in the PostCSS configuration.

1
2
3
4
5
6
7
8
9
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    // tailwindcss: {}
    "@tailwindcss/postcss": {}
  }
}

export default config

Also change the style code that you import globally.

1
2
3
4
5
6
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
@import "tailwindcss";

/* Omitted.. */