How to Install Tailwind CSS with Next.js

 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

Tool / Package	Type	Purpose	Official Link
Node.js	Runtime	JavaScript runtime to run Next.js and npm	🔗 nodejs.org
npm	Package Manager	Installs Tailwind, PostCSS, and other dependencies	🔗 npmjs.com
Next.js	Framework	React framework for SSR, routing, and frontend development	🔗 nextjs.org
Tailwind CSS	CSS Framework	Utility-first CSS framework for styling	🔗 tailwindcss.com
PostCSS	CSS Tool	Processes Tailwind CSS directives into actual styles	🔗 postcss.org
Autoprefixer	PostCSS Plugin	Adds vendor prefixes to CSS automatically	🔗 GitHub
tailwind.config.js	Config File	Tailwind config file for customization and purging unused CSS	🔗 Tailwind Docs
postcss.config.js	Config File	Required to run Tailwind with PostCSS in Next.js	🔗 PostCSS Docs
styles/globals.css	CSS File	Where Tailwind’s base, components, and utilities are imported	🔗 Global Styles

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:

Prompt	Answer
Would you like to use TypeScript with this project?	✅ Yes
Would you like to use ESLint with this project?	✅ Yes
Would you like to use Tailwind CSS with this project?	✅ Yes
Would you like to use the src/ directory?	✅ Yes
Would you like to use the App Router (recommended)?	✅ Yes
Would you like to customize the default import alias (@/*)?	⏎ Press Enter (No)
Would you like to use Turbopack for next dev (alpha)?	❌ No

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

Feature	Status
Tailwind CSS	✅ Ready
TypeScript	✅ Ready
ESLint	✅ Ready
App Router	✅ Ready
src/ Structure	✅ Ready
Dev Server	✅ Running

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?