0Pricing
Tailwind CSS Academy · Ders

Next.js’te Tailwind Kurulumu

Resmî kılavuzu kullanarak Tailwind’i bir Next.js projesine yükleyin, PostCSS’yi yapılandırın ve stillerin App Router’da doğru şekilde yüklendiğini doğrulayın.

Next.js’te Tailwind Kurulumu, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Next.js’te Tailwind Kurulumu” dersi ücretsiz mi?

Evet — “Next.js’te Tailwind Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Next.js’te Tailwind Kurulumu” dersinde ne öğreneceğim?

Resmî kılavuzu kullanarak Tailwind’i bir Next.js projesine yükleyin, PostCSS’yi yapılandırın ve stillerin App Router’da doğru şekilde yüklendiğini doğrulayın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Next.js’te Tailwind Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Next.js’te Tailwind Kurulumu
  2. React’te Koşullu Sınıflar
  3. CVA ile Bileşen Varyantları
  4. tailwind-merge ile Sınıf Çakışmalarından Kaçınma
← Tailwind CSS Academy Sayfasına Dön