⚡ How to Set Up a Next.js Project with Tailwind CSS

Next.js is a powerful React framework for building web applications. Tailwind CSS is a utility-first CSS framework that makes styling fast and responsive.

Combining them gives you the power of server-side rendering with beautiful, customizable UI.

🧱 Step 1: Create a New Next.js App

Run this in your terminal:

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

You’ve just created a fresh Next.js project. Let’s now add Tailwind CSS.

🎨 Step 2: Install Tailwind CSS

Use the official Tailwind installation for Next.js:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Make sure you're inside your Next.js project directory before running these commands.

⚙️ Step 3: Configure Tailwind

Open tailwind.config.js and set the content paths:

tailwind.config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This tells Tailwind where to look for class names to generate styles.

🧵 Step 4: Add Tailwind to CSS

Replace the contents of styles/globals.css with:

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

You’ve now enabled Tailwind’s styling system globally.

🚀 Step 5: Run the Project

Start your Next.js app with:

npm run dev

Go to http://localhost:3000 and see your app in action!

💡 Bonus: Add a Tailwind Component

Edit pages/index.js and try this Tailwind-styled block:

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-900 text-white">
      <h1 className="text-4xl font-bold">🚀 Next.js + Tailwind Ready!</h1>
    </div>
  );
}

Seeing no styles? Double-check your config paths and global CSS import in_app.js.

🧠 Final Tip

Combine Tailwind’s utility classes with reusable components to build sleek UIs lightning fast.

Follow for more frontend setup tutorials and productivity hacks.