LogoفارسیFA

Installing Tailwind CSS v3 in Your Next.js Application – Fast Styling with Simple Configuration

Tailwind CSS v3 is fully compatible with Next.js and enables fast, scalable styling. This article walks through installing Tailwind, configuring template paths, adding CSS directives, and linking your global styles to the root layout.

Tailwind CSSNext.jsglobals.csslayout.tsx

~1 min read • Updated Oct 28, 2025

Step 1: Install Tailwind CSS v3


Install the required packages:

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

This will generate tailwind.config.js and postcss.config.js.


Step 2: Configure Template Paths


In tailwind.config.js, define your content paths:

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

Step 3: Add Tailwind Directives to CSS


In app/globals.css, add the following:

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

Step 4: Import CSS in Root Layout


In app/layout.tsx, import your global styles:

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Conclusion


With Tailwind CSS v3 installed in your Next.js app, you can build modern, responsive UIs quickly. These basic setup steps can be extended with plugins, custom themes, and utility classes to match your design system.


Written & researched by Dr. Shahin Siami

Next Article