How to Use Tailwind CSS in a Next.js Project (Beginner-Friendly Guide)

If you’re building modern web apps with Next.js, adding Tailwind CSS can make styling super easy and fast. Instead of writing tons of custom CSS, Tailwind gives you ready-to-use utility classes to design beautiful UIs quickly.

In this blog, we’ll go step by step and learn how to use Tailwind CSS in a Next.js project — even if you’re a beginner. 🚀

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing CSS rules manually, you use pre-built classes like:

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

No need to create a .button { ... } style in CSS. Tailwind gives you classes like bg-blue-500 (background color), px-4 (padding), rounded (border-radius), etc.

This makes development faster and cleaner.

Step 1: Create a Next.js Project

If you don’t already have a project, create one:

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

Step 2: Install Tailwind CSS

Inside your project folder, install Tailwind and its dependencies:

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

This will create two files:

• tailwind.config.js
• postcss.config.js

Step 3: Configure Tailwind

In the tailwind.config.js file, update the content section so Tailwind scans your files:

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

Step 4: Add Tailwind to Global CSS

Open the styles/globals.css file and add these three Tailwind directives:

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

These lines tell Tailwind to include its default styles, reusable components, and utility classes.

Step 5: Start Using Tailwind in Next.js

Now you can use Tailwind classes in your components. Example:

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

Run your project:

npm run dev

Open http://localhost:3000 — you should see your styled text.

Why Use Tailwind in Next.js?

• ✅ Faster development – no custom CSS setup
• ✅ Responsive by default – mobile-friendly classes
• ✅ Clean code – less CSS files, more reusable UI
• ✅ Easy theming – extend colors and styles in tailwind.config.js

Example: Simple Button with Tailwind

Here’s a simple button component:

export default function Button() {
  return (
    <button className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg">
      Click Me
    </button>
  )
}

Features in this button:

• bg-green-500 → background color
• hover:bg-green-600 → changes color on hover
• py-2 px-4 → padding
• rounded-lg → rounded corners

FAQs About Tailwind + Next.js

Q1. Do I still need CSS files if I use Tailwind?
👉 Not always. Tailwind covers 90% of styles, but you can still write custom CSS if needed.

Q2. Will Tailwind make my app heavy?
👉 No. Tailwind automatically removes unused styles in production (tree-shaking).

Q3. Can I customize colors and fonts?
👉 Yes, in tailwind.config.js, you can extend the theme.

Interview Questions (with Answers)

1. How do you add Tailwind CSS to a Next.js project?
👉 Install tailwindcss postcss autoprefixer, configure tailwind.config.js, and import @tailwind base; @tailwind components; @tailwind utilities; in globals.css.

2. What is the purpose of @tailwind base; @tailwind components; @tailwind utilities;?
👉 These directives load Tailwind’s default styles, prebuilt components, and utility classes into your project.

3. How does Tailwind remove unused CSS in production?
👉 Tailwind uses PurgeCSS (configured via content in tailwind.config.js) to scan files and remove unused classes.

Conclusion

That’s it! 🎉 You just learned how to use Tailwind CSS in a Next.js project. From installation to writing your first styled component, everything is set up for a smooth workflow.

💡 Pro Tip: Start small by using Tailwind on buttons, headings, and layouts. Over time, you’ll see how much faster it is compared to traditional CSS.

👉 Keep practicing and try building your next Next.js project with Tailwind!