0Pricing
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.

Setting Up Tailwind in Next.js is a free Tailwind CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Configuring Content Paths

The most critical configuration step is setting the content array in tailwind.config.js. This tells Tailwind which files to scan for class names so it can purge unused styles in production. For a Next.js App Router project, include all app, pages, components, and lib directories. Missing a path means Tailwind will purge classes used in that directory — a common source of missing styles in production builds.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}'  // if using /src dir
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Global CSS Entry Point

Create a globals.css file (typically at app/globals.css or styles/globals.css) and add the three Tailwind directives. Import this file in your root layout component — app/layout.tsx for the App Router — so Tailwind styles are available throughout the entire application. Never import it multiple times; one root-level import is sufficient.

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles go below */
@layer base {
  body {
    @apply bg-white text-gray-900 antialiased;
  }
}

/* app/layout.tsx */
import './globals.css';

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

Using Tailwind in Next.js Components

Once set up, use Tailwind utility classes directly in your JSX. In Next.js, components can be either Server Components (default) or Client Components ('use client'). Tailwind classes work identically in both — they are pure HTML attributes that PostCSS processes at build time. There is no runtime cost to applying Tailwind classes in either component type.

// app/components/HeroSection.tsx
export default function HeroSection() {
  return (
    <section class="bg-gradient-to-br from-blue-600 to-indigo-700 py-24">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-5xl font-bold text-white mb-6">
          Build Faster with Tailwind
        </h1>
        <p class="text-xl text-blue-100 mb-8">
          Utility-first CSS for modern Next.js applications.
        </p>
        <a
          href="/get-started"
          class="bg-white text-blue-600 font-semibold px-8 py-3 rounded-full
                 hover:bg-blue-50 transition-colors"
        >
          Get Started
        </a>
      </div>
    </section>
  );
}

Extending the Theme in Next.js

Customize Tailwind for your Next.js project by extending the default theme in tailwind.config.js. Common extensions include custom brand colors, the Inter or Geist font (used by Next.js default template), and custom breakpoints. Use theme.extend to add new values alongside the defaults rather than replacing them entirely.

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme');

module.exports = {
  content: ['./app/**/*.{tsx,ts}', './components/**/*.{tsx,ts}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', ...fontFamily.sans]
      },
      screens: {
        '3xl': '1920px'
      }
    }
  },
  plugins: []
}

Tailwind With Next.js Layouts

Next.js App Router's nested layouts work seamlessly with Tailwind. Each layout segment can apply its own structural classes. A common pattern is the root layout setting the page background and font, a dashboard layout adding the sidebar flex structure, and individual page layouts providing content constraints like max-w-* and padding.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div class="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0">
        <nav class="p-4">{/* nav links */}</nav>
      </aside>

      {/* Main content */}
      <main class="flex-1 overflow-auto">
        <div class="max-w-7xl mx-auto p-8">
          {children}
        </div>
      </main>
    </div>
  );
}

Tailwind With next/image

When using next/image, apply Tailwind classes to control sizing and presentation. The Image component requires either explicit dimensions or the fill prop. When using fill, the parent must be relative and have defined dimensions — Tailwind's relative, w-full, and h-64 utilities handle this perfectly. Use object-cover and object-center for proper image cropping.

import Image from 'next/image';

export function CardImage({ src, alt }) {
  return (
    // Parent must be relative with defined dimensions
    <div class="relative h-48 w-full overflow-hidden rounded-t-xl">
      <Image
        src={src}
        alt={alt}
        fill
        class="object-cover object-center"
        sizes="(max-width: 768px) 100vw, 400px"
      />
    </div>
  );
}

TypeScript and Tailwind IntelliSense

Install the Tailwind CSS IntelliSense VS Code extension to get autocompletion, linting, and hover previews for Tailwind classes in your Next.js TypeScript project. The extension reads your tailwind.config.js to surface your custom theme values in the autocomplete menu. For projects using TypeScript config, rename the config to tailwind.config.ts and use the Config type from the tailwindcss package.

// tailwind.config.ts — TypeScript config
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  },
  plugins: []
};

export default config;

Verifying the Setup Works

After installation, verify your Tailwind setup with a quick sanity check. Add a visually obvious Tailwind class to your home page — like bg-red-500 text-white p-8 text-2xl — and run the dev server. If the styles apply, your setup is correct. If they do not, check that your globals.css import is in the root layout, the content paths cover the file you edited, and PostCSS is running (which Next.js handles automatically).

// app/page.tsx — quick verification
export default function HomePage() {
  return (
    <main class="min-h-screen bg-gray-50 flex items-center justify-center">
      <div class="bg-blue-600 text-white text-2xl font-bold px-8 py-6 rounded-2xl shadow-lg">
        Tailwind is working in Next.js!
      </div>
    </main>
  );
}

// Run: npm run dev
// Visit: http://localhost:3000
// You should see a blue rounded card

Common Setup Mistakes to Avoid

The most frequent Tailwind/Next.js setup issues are: missing content paths causing classes to be purged in production, importing globals.css in multiple places causing style duplication, and forgetting the @tailwind directives in the CSS file. Another common mistake is using className (React) vs class (HTML) — in JSX components, always use className to apply Tailwind classes.

// CORRECT in JSX/TSX
<div className="flex items-center gap-4 p-6">
  <span className="text-lg font-semibold text-gray-900">Hello</span>
</div>

// WRONG in JSX/TSX (use in plain HTML only)
<div class="flex items-center gap-4 p-6">
  <span class="text-lg font-semibold text-gray-900">Hello</span>
</div>

// Also check: globals.css must have all 3 directives
// @tailwind base;       ← resets and base styles
// @tailwind components; ← component layer
// @tailwind utilities;  ← all utility classes

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: installing Tailwind in Next.js requires tailwindcss, postcss, and autoprefixer, the content array controls which class names survive production purging, and globals.css with three @tailwind directives must be imported once in the root layout. Next up we explore managing conditional classes in React with clsx and tailwind-merge.

Frequently asked questions

Is the “Setting Up Tailwind in Next.js” lesson free?

Yes — the full text of “Setting Up Tailwind in Next.js” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “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. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Tailwind CSS Academy?

No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Setting Up Tailwind in Next.js” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Tailwind CSS Academy lesson?

Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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