Next.js  

How to Set Up Tailwind CSS with Next.js

Introduction

Tailwind CSS is a powerful, utility-first CSS framework that makes designing modern, responsive web applications faster and easier. When combined with Next.js, a popular React framework, you can build high-performance and visually stunning websites quickly.

In this detailed guide, we’ll walk you through how to set up Tailwind CSS in a Next.js project step by step. We’ll use simple language, clear explanations, and examples so even beginners can follow along.

What You Need Before Starting

Before we begin, make sure you have the following installed:

  • Node.js (version 16 or above)

  • npm or yarn (package managers)

You can check your Node.js version using:

node -v

If you don’t have Node.js installed, download it from https://nodejs.org.

Step 1. Create a New Next.js Project

If you don’t already have a Next.js app, create one using the following command:

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

This will create a new folder named my-tailwind-app with all the files needed for a Next.js application.

Go to your project folder:

cd my-tailwind-app

If you already have a Next.js project, you can skip this step.

Step 2. Install Tailwind CSS and Its Dependencies

Next, install Tailwind CSS along with PostCSS and Autoprefixer (which help process your CSS automatically).

Run this command:

npm install -D tailwindcss postcss autoprefixer

Or if you use Yarn:

yarn add -D tailwindcss postcss autoprefixer

After installation, initialize Tailwind by running:

npx tailwindcss init -p

This creates two files in your project:

  • tailwind.config.js → Tailwind configuration file.

  • postcss.config.js → PostCSS configuration file.

Step 3. Configure Tailwind Paths

Now, tell Tailwind where to look for your files. Open the tailwind.config.js file and update the content section as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This ensures Tailwind scans all your React components, pages, and app folders for class names.

Step 4. Add Tailwind to Your CSS File

Next, import Tailwind’s base styles into your global CSS file.

Open styles/globals.css and replace everything with:

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

This tells Next.js to use Tailwind’s built-in styles.

Step 5. Start Your Development Server

Now that everything is configured, start your Next.js app to make sure everything works:

npm run dev

Your app should be running at http://localhost:3000.

Step 6. Test Tailwind CSS

To check if Tailwind is working, open your pages/index.js file and edit the content like this:

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello, Tailwind CSS + Next.js!
      </h1>
      <p className="mt-4 text-gray-700">This setup works perfectly!</p>
    </div>
  );
}

Now, visit http://localhost:3000 and you should see a centered message with blue text. If it appears correctly, Tailwind is successfully installed!

Step 7. Customize Your Design (Optional)

Tailwind allows you to easily customize your color palette, fonts, and spacing in the tailwind.config.js file.

Example of customizing colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1DA1F2',
      },
    },
  },
};

Now you can use your custom color anywhere:

<button className="bg-brand text-white px-4 py-2 rounded-md">
  Click Me
</button>

Step 8. Optimize Tailwind for Production

Tailwind automatically removes unused CSS classes in production, but make sure your configuration is correct.

In your tailwind.config.js, make sure the content array includes all file paths used in your project.

Then, build your project using:

npm run build

This ensures your final CSS file is optimized and lightweight.

Step 9. Adding Plugins (Optional)

Tailwind supports a variety of official and community plugins, such as forms, typography, and aspect-ratio.

To install the official plugins:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

Then, enable them in your tailwind.config.js:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
  require('@tailwindcss/aspect-ratio'),
],

These plugins enhance your design options with minimal setup.

Step 10. Deploy Your Tailwind + Next.js App

Once your project is ready, you can deploy it easily using Vercel, the company that developed Next.js.

Steps:

  1. Push your project to GitHub.

  2. Visit vercel and import your repository.

  3. Click Deploy.

Within minutes, your app will be live with Tailwind fully integrated.

Example Folder Structure

Your project should now look like this:

my-tailwind-app/
├── app/
├── components/
├── pages/
│   ├── index.js
├── public/
├── styles/
│   ├── globals.css
├── tailwind.config.js
├── postcss.config.js
├── package.json

Troubleshooting Common Issues

1. Tailwind Classes Not Working?

  • Make sure your tailwind.config.js content paths are correct.

  • Restart the development server.

  • Check if globals.css is imported in _app.js:

import '../styles/globals.css';

2. Build Errors in Production?

Run:

npm run build

If there are issues, Tailwind will display which files have problems.

Summary

Setting up Tailwind CSS with Next.js is easy and fast. You just need to install Tailwind, configure it, and include it in your global styles. Once done, you can use Tailwind’s powerful utility classes to design responsive, modern, and professional-looking apps in minutes.

Membership not found