In this post, we’ll install Tailwind CSS in a Next.js project and understand how everything connects step by step.

By the end, you’ll have a fully working setup ready for building modern UIs.

🚀 Step 1: Create a Next.js Project

First, create a new Next.js app:

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

Then move into your project folder:

cd my-tailwind-app

🎨 Step 2: Install Tailwind CSS

Now install Tailwind and required dependencies:

npm install -D tailwindcss postcss autoprefixer

Generate the config files:

npx tailwindcss init -p

This creates:

• tailwind.config.js

• postcss.config.js

⚙️ Step 3: Configure Tailwind

Open your tailwind.config.js file and update it like this:

export default {
  content: [
    "./app//*.{js,ts,jsx,tsx}",
    "./pages//.{js,ts,jsx,tsx}",
    "./components/**/.{js,ts,jsx,tsx}",
  ],
  theme: {
  extend: {},
  },
  plugins: [],
};

🔑 Why this step matters

This tells Tailwind:
👉 “Scan these files and generate only the CSS we actually use.”

This keeps your final CSS file small and optimized.

🎯 Step 4: Add Tailwind to Global CSS

Open:

app/globals.css

Replace everything with:

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

🧪 Step 5: Test Tailwind in Next.js

Now open app/page.js (or page.tsx) and add this:

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
     <h1 className="text-4xl font-bold text-blue-600">
     Tailwind CSS is Working 🚀
     </h1>
   </div>
  );
}

🧠 What Just Happened?

Let’s break it down:

• min-h-screen → full screen height

• flex → enables flexbox

• items-center → vertical centering

• justify-center → horizontal centering

• bg-gray-100 → light background

• text-4xl → large text

• font-bold → bold text

• text-blue-600 → blue color

You just built a centered UI without writing a single custom CSS file.

⚡ Why This Setup is Powerful

Once Tailwind is installed:

• You never write repetitive CSS again

• Your UI becomes faster to build

• Design stays consistent

• Works perfectly with React & Next.js

This is why modern companies prefer Tailwind for frontend development.

🧩 Common Mistakes (Avoid These)

❌ Forgetting to add content paths in config
❌ Not restarting dev server after setup
❌ Editing wrong globals.css file
❌ Missing @tailwind directives

🧭 What’s Next?

In the next post, we’ll build your first real component:

👉 A Responsive Navbar using Tailwind CSS

This is where things start getting real-world practical.