Install Tailwind CSS with Next.js

Setting up Tailwind CSS in a Next.js v10+ project.

This tutorial will walk you through the steps by steps to install and configure a Next.js project with TailwindCSS.

TailwindCSS

Tailwind is a utility-first CSS framework that provides a set of ready-to-use mixins, so it doesn’t require any of the usual CSS configuration. TailwindCSS is used for frontend styling, as it helps build websites without ever leaving your HTML files.

NextJS

Next.js is a minimalistic open-source framework for server-rendered React applications, built on top of ReactJs, allowing developers to create JavaScript applications that work both in the browser and in Node environments (e.g., server rendering).

Create your project

Create a new Next.js project using command line tool. You can use NextJs official documentation to create brand new Nextjs app.

npx create-next-app my-project
cd my-project

Install Tailwind CSS

Install TailwindCSS and its peer dependencies via npm. You can also use yarn instead of npm. Now run the init command as shown below to generate tailwind.config.js and postcss.config.js. These files are helpful when you want to configure more things regarding TailwindCSS for your application.

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

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file. You can use your own CSS, external packages and plugins in your project using tailwind.config.js.

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

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file. Now basic setup is completed.

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

It is time to run your build process with npm run dev.

npm run dev

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

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