Set Up Tailwind CSS v4 in Next.js

Tailwind CSS v4 is a ground-up rewrite with a new Oxide engine. Configuration moved from JavaScript to CSS. Setup is simpler than ever.

Step 1: Create a Next.js Project

pnpm create next-app@latest my-app
cd my-app

Select "Yes" for Tailwind CSS when prompted. Next.js 15+ auto-configures Tailwind v4.

Step 2: Install Manually (Existing Projects)

pnpm add tailwindcss @tailwindcss/postcss postcss

Step 3: Configure PostCSS

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Step 4: Import Tailwind in CSS

/* app/globals.css */
@import "tailwindcss";

That is the entire configuration. No tailwind.config.js needed.

Step 5: CSS-First Configuration

All customization happens in CSS using the @theme directive:

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --color-brand-light: #818cf8;
  --color-brand-dark: #3730a3;

  --font-sans: "Inter", sans-serif;
  --font-heading: "Cal Sans", sans-serif;

  --breakpoint-xs: 30rem;

  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

Use custom values directly in classes:

<div class="bg-brand text-white font-heading animate-fade-in">
  Custom themed component
</div>

Step 6: Dark Mode

Dark mode works via the dark variant:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Supports dark mode
</div>

Step 7: Source Detection

Tailwind v4 auto-detects your source files. Override if needed:

@import "tailwindcss";

@source "../components";
@source "../lib";

To exclude files:

@source not "../components/legacy";

Step 8: Using Plugins

pnpm add @tailwindcss/typography @tailwindcss/forms

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Step 9: Container Queries

Built-in support for container queries:

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    Responds to container width
  </div>
</div>

Step 10: Migrating from v3

Use the official upgrade tool:

npx @tailwindcss/upgrade

Key changes:

tailwind.config.js → @theme in CSS
@tailwind base/components/utilities → @import "tailwindcss"
plugins: [] → @plugin in CSS
content: [] → automatic source detection
ring-* default width changed from 3px to 1px
shadow-* colors changed

Performance

Tailwind v4 with the Oxide engine is significantly faster:

Full builds up to 5x faster
Incremental builds up to 100x faster
Written in Rust for maximum speed

Need a Custom Design System?

We build tailored design systems with Tailwind CSS for businesses of all sizes. Get in touch to discuss your project.

How to Set Up Tailwind CSS v4 in Next.js