How to Set Up Tailwind CSS v4 in Next.js 15: A Complete Guide for 2025

🛠️ Introduction

Tailwind CSS v4 introduces a revolutionary shift from JavaScript-based configurations to a CSS-first approach, streamlining the styling process in modern web applications. When combined with Next.js 15, developers can leverage powerful features like the App Router, enhanced performance, and simplified theming.

🚀 Step-by-Step Guide to Setting Up Tailwind CSS v4 in Next.js

1. Initialize a New Next.js 15 Project

Begin by creating a new Next.js project using the create-next-app CLI. (Support Tailwind CSS v4 in `npx create-next-app@latest - GitHub)

npx create-next-app@latest my-next-app --ts --tailwind --eslint --app
cd my-next-app

Explanation of Flags:

• --ts: Sets up TypeScript support.

• --tailwind: Automatically configures Tailwind CSS.

• --eslint: Integrates ESLint for code linting.

• --app: Utilizes the App Router introduced in Next.js 13+.

This command scaffolds a new Next.js 15 project with Tailwind CSS v4 pre-configured, eliminating the need for manual setup. (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)

2. Understand the CSS-First Configuration in Tailwind CSS v4

Tailwind CSS v4 departs from the traditional tailwind.config.js file. Instead, configurations are now defined directly within your CSS files using the @theme directive. (Tailwind CSS v4.0)

Example:

@import 'tailwindcss';

@theme {
  --color-primary: #1D4ED8;
  --font-sans: 'Inter', sans-serif;
}

This approach simplifies the configuration process and keeps your styling centralized.

3. Customize Your Global Styles

Open the app/globals.css file and define your custom themes and styles. (Styling: Tailwind CSS - Next.js)

@import 'tailwindcss';

@theme {
  --color-accent: #F59E0B;
  --font-heading: 'Poppins', sans-serif;
}

@layer base {
  h1 {
    font-family: var(--font-heading);
    color: var(--color-accent);
  }
}

This setup allows you to maintain consistent theming across your application without the need for additional configuration files.

4. Implement Dark Mode with next-themes

To enable dark mode functionality, install the next-themes package: (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)

npm install next-themes

Then, configure your application to use the data-theme attribute for theme switching.

Example:

@import 'tailwindcss';

@custom-variant dark ([data-theme="dark"], [data-theme="dark"] *);

@theme {
  --color-background: #FFFFFF;
  --color-text: #000000;
}

@layer theme {
  [data-theme="dark"] {
    --color-background: #000000;
    --color-text: #FFFFFF;
  }
}

This configuration ensures that your application can switch between light and dark themes seamlessly.

5. Start the Development Server

With everything set up, start your development server: (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)

npm run dev

Navigate to http://localhost:3000 to view your application in action.

🎨 Utilizing Tailwind CSS Utility Classes

Tailwind CSS provides a plethora of utility classes to style your components efficiently.

Example:

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background text-text p-8">
      <h1 className="text-4xl font-bold">Welcome to My Next.js App</h1>
      <p className="mt-4 text-lg">
        This application is styled using Tailwind CSS v4.
      </p>
    </div>
  );
}

In this example, bg-background and text-text reference the CSS variables defined in your @theme directive, promoting consistency and maintainability.

🧠 Tips and Best Practices

• Leverage CSS Variables: Define and use CSS variables for colors, fonts, and other design tokens to maintain a consistent design system. (Tailwind CSS v4.0)

• Avoid tailwind.config.js: With Tailwind CSS v4, configurations are handled within CSS, reducing the need for separate configuration files. (Tailwind CSS v4.0)

• Integrate UI Libraries: Consider using component libraries like ShadCN UI for pre-built, accessible components that align with Tailwind's utility-first approach. (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)

• Enable Dark Mode Thoughtfully: Use next-themes to manage theme switching, ensuring a seamless user experience across different themes. (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)

📚 Additional Resources

• Tailwind CSS v4 Official Release Notes

• Next.js Documentation on Tailwind CSS

• Tailwind CSS Guide for Next.js

By following this guide, you can efficiently set up Tailwind CSS v4 in your Next.js 15 project, leveraging the latest features and best practices for modern web development. (Setting Up (2025) Next.js 15 with ShadCN & Tailwind CSS v4 (No ...)