Next.js + Tailwind CSS Setup Guide (2025)

Next.js is a powerful React framework built by Vercel that makes it easy to create production-grade web applications. It extends React with powerful features like:

✅ Server-Side Rendering (SSR)
⚡ Static Site Generation (SSG)
🔀 Hybrid Rendering (both SSR + SSG)
🔧 Built-in API routes
🌐 SEO optimization
🛠️ Image optimization, routing, and more!

When Next.js is paired with Tailwind CSS, it allows you to build sleek, fast, and scalable modern web applications.

In this guide, we’ll walk you through the process of setting up a brand new Next.js project (using the latest v15+) and installing Tailwind CSS v4.1—step by step using the latest create-next-app prompts.

✅ Prerequisites

Make sure you have these installed:

Node.js (v18 or later recommended)
npm (comes with Node)
VS Code or your favorite code editor

⚙️ Step 1: Create a New Next.js App

Open your terminal and run:

npx create-next-app@latest

You’ll be prompted with several options to customize your setup:

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No

💡 Pro Tip: Select “Yes” for Tailwind CSS and App Router to unlock modern Next.js power.

Once complete, it sets up the entire project with Tailwind, ESLint, TypeScript, and even a Git repo. Here’s what the terminal will show:

Success! Created my-app at /your/path/to/my-app

Alternatively, you can quickly scaffold a new Next.js project with Tailwind, TypeScript, ESLint, App Router, and more using this one-liner: npx create-next-app@latest my-app --typescript --eslint --tailwind --src-dir --app --import-alias "@/*"

💡 This sets everything up automatically without the need to answer prompts manually!

Once the setup is complete, navigate into your project folder and open it in VS Code:

cd my-app
code .

🧵 Step 2: Run the Dev Server

Spin up your dev server with:

npm run dev

If you chose Turbopack, you'll see a blazing-fast startup and your app will be live at:

http://localhost:3000

🎉 You've successfully created a Next.js 15.2.4 project with Tailwind CSS, TypeScript, ESLint, App Router, and Turbopack — fully set up and running on http://localhost:3000.

🎨 Step 3: Start Using Tailwind CSS

Since you selected Tailwind CSS in the setup, it’s already configured! You can now start styling using utility classes like this:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Hello Tailwind + Next.js!</h1>
    </main>
  );
}

The global styles and Tailwind config are already placed inside the src directory:

src/app/globals.css
tailwind.config.ts
postcss.config.mjs

🧪 Bonus: Folder Structure

Here’s a quick peek at the auto-generated folder structure:

my-app/
├─ src/
│  ├─ app/
│  │  ├─ page.tsx
│  │  ├─ layout.tsx
│  ├─ styles/
│  │  ├─ globals.css
├─ tailwind.config.ts
├─ postcss.config.mjs
├─ tsconfig.json

🎉 Conclusion

That’s it! You now have a fully working Next.js + Tailwind CSS app using the latest features like App Router, Turbopack, and TypeScript — all preconfigured.

You can now: