How to Install Tailwind CSS with Next.js

A step-by-step guide to setting up and installing Tailwind CSS with your Next.js project.

Step 01: Create Your Project

The first step in the process is to create a brand new Next.js project. The preferred route is to use Create Next App;

> npx create-next-app@latest my-project --typescript --eslint
> cd my-project
}

Step 02: Install Tailwind CSS

The second step is to install tailwindcss and its dependencies. This can be done with npm and then run the init command to have both the tailwind.config.js and postcss.config.js generated.

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

Step 03: Template Path Configuration

The third step of the process is adding the paths to all of your template files in the tailwind.config.js file.

/** @type {import('tailwindcss').Config} **/
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // If you are using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 04: Adding The Tailwind Directives To The CSS

Next, you will add the @tailwind directives for each of Tailwind's layers to the @globals.css file.

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

Step 05: Start the build process

Lastly, run the build process with npm run dev.

> npm run dev

Step 06: Begin the build process

And there you have it! You are now ready to begin using Tailwind's utility classes to style the content in your Next.js project.

export default function Home() {
  return (
                    // Styling Example
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}