How to Add TailwindCSS to a Next.js App

First, create a new Next.js app with the following terminal command. It will ask for a project name, just make sure to mention the project name in kebab-case.

npx create-next-app@latest

Then go to the Next.js project directory with cd command. If your project name was “hello-world”, it should be like the below.

cd hello-world

Run the following command to install TailwindCSS, PostCSS and AutoPrefixer packages as development packages with the -D flag.

npm install -D tailwindcss postcss autoprefixer

The following command will create postcss.config.js and tailwind.conf.js files. We can use these files to extend the functionalities of PostCSS and TailwindCSS.

npx tailwindcss init -p

Still, TaildwindCSS does not know which directory contains our pages. So open the tailwind.conf.js file and add the following pages and components paths. Leave other things as they are and finally, your tailwind.conf.js file should be similar to below.

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

Then open the styles/globals.css file and delete everything in that file. After that add the following lines. It will make TailwindCSS available to the Next.js app.

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

Start the Next.js app with the npm run dev command and make sure that you can access the application in the browser with http://localhost:3000 URL without any issue.

npm run dev

Alright, open the pages/index.js file or any other page/component and add some TailwindCSS classes.

export default function Home() {
  return (
    <div className="container mx-auto">
      <div className="flex justify-center items-center h-screen">
        <h1 className="text-3xl text-white bg-gradient-to-br from-blue-700 to-blue-900 px-6 py-4 drop-shadow-xl rounded-lg">Hello <span className="font-bold">Tailwind</span>!</h1>
      </div>
    </div>
  )
}