Guide to Install & Setup Tailwind CSS with Next.js

Akash MoreSoftware Developer

Published On

Updated On

Table of Content

Introduction

Tailwind CSS is a popular utility-first CSS framework that enables developers to build modern, responsive UIs quickly. Next.js, a React-based framework, is an excellent choice for building web applications with server-side rendering, static site generation, and API routes. In this guide, we will walk you through installing and setting up Tailwind CSS in a Next.js project step by step.

Prerequisites

Before getting started, make sure you have the following installed:

Node.js (LTS version recommended)
npm or yarn (comes with Node.js)

You can check if Node.js and npm are installed by running:

node -v
npm -v

Step 1: Create a Next.js Project

Next.js provides a simple command to create a new project. If you don’t already have a Next.js project, create one using the following command:

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

Alternatively, if you use yarn, run: This will set up a new Next.js project with the default template. You can also specify a custom template if needed.

yarn create next-app my-next-tailwind-app
cd my-next-tailwind-app

Step 2: Install Tailwind CSS

Once inside your project directory, install Tailwind CSS and its dependencies using npm or yarn:

npm install -D tailwindcss postcss autoprefixer

yarn add -D tailwindcss postcss autoprefixer

These packages are essential for integrating Tailwind into your Next.js application.

After installation, initialize Tailwind with the following command:

npx tailwindcss init -p

This command generates two files:

tailwind.config.js - Tailwind’s configuration file.

postcss.config.js - Configuration file for PostCSS.

Step 3: Configure Tailwind CSS

To ensure Tailwind scans all your files for class names, update the content array in tailwind.config.js as follows:

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

This configuration tells Tailwind to scan all files inside the pages and components directories.

Step 4: Add Tailwind Directives

Next, import Tailwind’s base styles into your global CSS file. Open styles/globals.css and add:

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

This ensures Tailwind’s styles are applied across your entire project.

Step 5: Start the Development Server

Now, you can start your Next.js development server to test Tailwind CSS:

npm run dev

yarn dev

This will launch your Next.js app on http://localhost:3000. Open the URL in your browser to see the application in action.

Step 6: Verify Tailwind CSS is Working

To confirm Tailwind CSS is applied, modify pages/index.js as follows:

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-blue-500">
      <h1 className="text-white text-4xl font-bold">Hello, Tailwind with Next.js!</h1>
    </div>
  );
}

Save the file and check the browser. If the background color and text styles apply correctly, Tailwind CSS is working!

Customizing Tailwind CSS

Tailwind allows customization of themes, colors, and styles. To modify the default configuration, update tailwind.config.js. For example, to extend the default color palette:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#9333EA',
      },
    },
  },
};

You can now use bg-primary or text-secondary in your components.

Optional: Enable JIT Mode for Faster Development

For a better development experience, enable Tailwind’s Just-In-Time (JIT) mode in tailwind.config.js:

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

JIT mode compiles only the used styles, making development faster and reducing unused CSS.

Conclusion

By following this guide, you have successfully installed and configured Tailwind CSS in your Next.js project. Tailwind CSS provides a powerful utility-first approach that allows you to build responsive and modern UIs with ease.

Now that you have Tailwind CSS set up, here are some next steps you can explore:

Component Styling: Experiment with different Tailwind utility classes to style your components.
Responsive Design: Use Tailwind’s responsive utilities to build layouts that work on various screen sizes.
Dark Mode: Enable and configure dark mode in your project using Tailwind’s built-in support.
Reusable Components: Create reusable UI components using Tailwind’s utility classes and Next.js components.

Schedule a call now

Start your offshore web & mobile app team with a free consultation from our solutions engineer.

We respect your privacy, and be assured that your data will not be shared

Call Us

Mail Us