How to Install Tailwind CSS with Next.js

If you’re building a modern React web application, combining Next.js and Tailwind CSS is one of the best choices you can make. This guide will show you how to set up Tailwind CSS in a brand-new Next.js project using the latest features like the App Router, TypeScript, and the src/ folder structure — all with minimal configuration.

Tailwind CSS + Next.js Setup: Tool Table

Step 1: Create a New Next.js App

Open your terminal and run:

npx create-next-app@latest my-app

You’ll be asked a few setup questions. Use the following recommended answers:

This will automatically:

• Scaffold your project
• Install Tailwind CSS, TypeScript, and ESLint
• Set up src/ directory with App Router
• Configure tailwind.config.js, postcss.config.js, etc.

Step 2: Navigate into Your Project and Run Dev Server

cd my-app
npm run dev

Then visit:

👉 http://localhost:3000

You should see the default Next.js homepage.

Step 3: If You Missed Tailwind CSS (Optional)

If you forgot to select Tailwind, you can manually add it:

npm install -D tailwindcss postcss autoprefixer

This creates:

• tailwind.config.js

Then update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}", // Scan all files in src
  ],
  theme: {
    extend: {
      colors: {
        primary: "#1D4ED8",
        secondary: "#9333EA",
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Step 4: Set up Tailwind in CSS

Edit src/app/globals.css to include Tailwind’s directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Make sure globals.css is imported in src/app/layout.tsx:

import './globals.css';

Folder Structure After Setup

You should now have:

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
├── tailwind.config.js
├── postcss.config.js
├── tsconfig.json
├── next.config.js
├── package.json

Step 5: Test Tailwind CSS

Open src/app/page.tsx and replace the content with:

export default function Home() {
  return (
    <div className="flex h-screen items-center justify-center bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white">
      <h1 className="text-4xl font-bold">Welcome to Tailwind CSS with Next.js!</h1>
    </div>
  );
}

Save and view your site — you should see a gradient background and centered text.

Summary

Next Steps

• Create new pages under src/app (e.g., src/app/about/page.tsx)
• Use Tailwind utility classes for layout & styling
• Optionally install UI kits like:
  • Tailwind UI
  • DaisyUI
  • Headless UI

Would you like a ready-to-copy GitHub repository version, or would you like to deploy it to Vercel next?

About trencq

Hi there 👋, I’m Delowar Hossen (QuantumCloud)
-------------------------------------------
🌱 I’m currently creating a sample Laravel and WordPress plugin
👯 I’m looking to collaborate on open-source PHP & JavaScript projects
💬 Ask me about Laravel, MySQL and WordPress plugin
⚡ Fun fact: I love turning ☕️ into code!