0Pricing
Tailwind CSS Academy · Lekcja

Konfigurowanie Tailwind w Next.js

Zainstalują Państwo Tailwind w projekcie Next.js zgodnie z oficjalnym przewodnikiem, skonfigurują PostCSS i sprawdzą, czy style poprawnie ładują się w App Routerze.

Konfigurowanie Tailwind w Next.js to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Konfigurowanie Tailwind w Next.js” jest bezpłatna?

Tak — pełny tekst „Konfigurowanie Tailwind w Next.js” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfigurowanie Tailwind w Next.js”?

Zainstalują Państwo Tailwind w projekcie Next.js zgodnie z oficjalnym przewodnikiem, skonfigurują PostCSS i sprawdzą, czy style poprawnie ładują się w App Routerze. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?

Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfigurowanie Tailwind w Next.js”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?

Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfigurowanie Tailwind w Next.js
  2. Warunkowe klasy w React
  3. Warianty komponentów za pomocą CVA
  4. Unikanie konfliktów klas za pomocą tailwind-merge
← Powrót do Tailwind CSS Academy