0PricingLogin▼
Tailwind CSS Academy · Lesson

Setting Up Tailwind in Next.js

Install Tailwind in a Next.js project using the official guide, configure PostCSS, and verify styles load correctly in the App Router.

Next.js and Tailwind: The Setup

Tailwind CSS has first-class support in Next.js. Starting with Next.js 13+, the create-next-app scaffolder includes a Tailwind setup option, so you can get started with a single command. The integration relies on PostCSS to process Tailwind at build time, producing an optimized CSS bundle with only the classes used in your project. Understanding the full setup flow lets you configure it manually in existing projects too.

# Create a new Next.js project with Tailwind
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app

cd my-app
npm run dev

Manual Tailwind Installation in Next.js

To add Tailwind to an existing Next.js project, install three packages: tailwindcss, postcss, and autoprefixer. Then generate the config files with npx tailwindcss init -p, which creates both tailwind.config.js and postcss.config.js. PostCSS is the pipeline that transforms your CSS — Next.js automatically detects postcss.config.js and applies its plugins during the build.

# Install dependencies
npm install -D tailwindcss postcss autoprefixer

# Generate config files
npx tailwindcss init -p

# This creates:
# tailwind.config.js
# postcss.config.js

All lessons in this course

  1. Setting Up Tailwind in Next.js
  2. Conditional Classes in React
  3. Component Variants With CVA
  4. Avoiding Class Conflicts With tailwind-merge
← Back to Tailwind CSS Academy