Install Tailwind CSS with Next.js: Setup Guide

Introduction

Next.js is one of the most popular React frameworks for building fast, SEO-friendly web applications. Tailwind CSS integrates seamlessly with Next.js and is officially supported by the Tailwind team.

In this guide, you’ll learn the official and recommended way to install Tailwind CSS in a Next.js project, using PostCSS and the App Router, compatible with Tailwind CSS v4+.

Why Use Tailwind CSS with Next.js?

Tailwind CSS is a perfect match for Next.js because:

• Utility-first styling works well with React components
• Smaller and optimized CSS output
• Faster page rendering
• Excellent Core Web Vitals and SEO
• Official support from Tailwind

This setup is widely used in real-world production applications.

Prerequisites

Before starting, make sure you have:

• Node.js installed
• npm available
• Basic knowledge of React and Next.js

Step 1: Create a New Next.js Project

If you don’t already have a project, create one using Create Next App:

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

This command creates a Next.js project with:

• TypeScript
• ESLint
• App Router (recommended)

Step 2: Install Tailwind CSS

Install Tailwind CSS and its required PostCSS plugin:

npm install tailwindcss @tailwindcss/postcss postcss

This installs all dependencies required for Tailwind CSS to work with Next.js.

Step 3: Configure PostCSS Plugins

Create a file named postcss.config.mjs in the root of your project and add:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

This configuration allows Next.js to process Tailwind CSS correctly.

Step 4: Import Tailwind CSS

Open the global CSS file:

app/globals.css

Add the following line:

@import "tailwindcss";

This single import enables all Tailwind utilities across your application.

Step 5: Start the Development Server

Run the Next.js development server:

npm run dev

Your application will start on a local development URL.

Step 6: Start Using Tailwind in Your Project

Edit app/page.tsx and add Tailwind utility classes:

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

If the text appears large, bold, and underlined, Tailwind CSS is working correctly.

Why This Is the Official and Recommended Setup

• Uses Tailwind CSS v4+
• Works with Next.js App Router
• No unnecessary configuration
• Fully supported by Tailwind team
• Production-ready

This approach replaces older Tailwind setup guides and is future-proof.

Common Mistakes to Avoid

• Using outdated Tailwind v3 guides
• Forgetting to create postcss.config.mjs
• Importing Tailwind in the wrong CSS file
• Mixing CDN and npm installations

Interview Questions and Answers

1. What is the official way to install Tailwind CSS in Next.js?

By installing tailwindcss and @tailwindcss/postcss, configuring PostCSS, and importing Tailwind in globals.css.

2. Which Next.js router works best with Tailwind CSS?

The App Router is recommended for modern Next.js applications.

3. Do we need Tailwind config files for basic setup?

No. Tailwind works with minimal configuration in Next.js.

4. Is Tailwind CSS production-ready with Next.js?

Yes. It is widely used in enterprise-level applications.

5. Does Tailwind CSS improve Next.js SEO?

Yes. Smaller CSS and faster rendering help improve SEO and Core Web Vitals.