Getting Started with Tailwind CSS v4 in Next.js

Tailwind CSS v4 has arrived, bringing dramatic changes to how we configure and build our styling systems. In this post, we’ll explore the new compiler, CSS-first configurations, and how to use it in Next.js App Router.

What is New in Tailwind v4?

The highlight of v4 is the transition to **Oxide**, a lightning-fast Rust-based engine designed to compile CSS in a fraction of the time. In addition to speed improvements, Tailwind v4 moves away from the classic tailwind.config.js file, shifting configurations entirely into standard CSS variables!

1. Configuration in CSS Instead of writing a JavaScript object to customize colors or themes, you now declare them inside your `globals.css` file:

@import "tailwindcss";

@theme {
  --color-primary: #0070f3;
  --color-brand-blue: #0070f3;
}

These variables are automatically mapped to utility classes like text-brand-blue and bg-primary.

2. Built-in Cascade Layers With the new cascade layer integration, Tailwind v4 structures code cleanly inside `@layer base`, `@layer components`, and `@layer utilities` without needing complex postcss integrations.

Setting Up Tailwind v4 in Next.js App Router

Integrating Tailwind CSS v4 in Next.js App Router is simpler than ever:

1. Install Tailwind and PostCSS: ```bash npm install tailwindcss @tailwindcss/postcss postcss ```

1. Add a `postcss.config.mjs` to load the tailwindcss postcss plugin: ```javascript export default { plugins: { "@tailwindcss/postcss": {}, }, }; ```

1. Replace your `globals.css` content with: ```css @import "tailwindcss"; ```

Now, you have complete access to v4 styling parameters, custom theme bindings, and fast compilation.

Conclusion

Tailwind CSS v4 makes the styling process cleaner, faster, and highly aligned with standard CSS variables. Try incorporating it into your next project to experience the speed of the new compiler firsthand.