Install Tailwind CSS with Next.js

Setting up Tailwind CSS in a Next.js project.

Create your project

Start by creating a new Next.js project if you don't have one set up already. The most common approach is to use Create Next App.

Terminal

npx create-next-app@latest my-project --typescript --eslint --appcd my-project

Install Tailwind CSS

Install @tailwindcss/webpack via npm.

Terminal

npm install tailwindcss @tailwindcss/webpack

Configure the webpack loader

Add the @tailwindcss/webpack loader to your next.config.mjs file.

next.config.mjs

/** @type {import('next').NextConfig} */const nextConfig = {  webpack(config) {    config.module.rules.push({      test: /\.css$/i,      use: ['@tailwindcss/webpack'],    })    return config  },}export default nextConfig

Import Tailwind CSS

Add an @import to ./app/globals.css that imports Tailwind CSS.

globals.css

@import "tailwindcss";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

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

page.tsx

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

Install Tailwind CSS with Next.js

Using webpack

Using PostCSS

Create your project

Install Tailwind CSS

Configure the webpack loader

Import Tailwind CSS

Start your build process

Start using Tailwind in your project