Tailwind CSS 4.0 Yenilikleri ve Migration Rehberi: Performans, CSS-First Config (2026)

Ana Yenilikler / Key Features

• Oxide Engine: Rust tabanlı yeni performans motoru (Rust-powered performance engine)
• CSS-First Config: JavaScript yerine CSS'te konfigürasyon
• Lightning CSS: PostCSS yerine Lightning CSS entegrasyonu
• Container Queries: Native container query desteği
• P3 Color Palette: Modernize edilmiş geniş renk paleti
• Zero Config: Otomatik içerik algılama (automatic content detection)

Eski Yöntem (v3.x) / Old Way

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
}

Yeni Yöntem (v4.0) / New Way

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-sans: "Inter", sans-serif;
}

/* İçerik otomatik algılanır! Content is auto-detected! */

Container Queries

<!-- Container tanımla -->
<div class="@container">
  <!-- Container genişliğine göre responsive -->
  <div class="@md:flex @lg:grid @lg:grid-cols-3">
    ...
  </div>
</div>

/* @min ve @max variants */
<div class="@min-[400px]:flex @max-[800px]:hidden">
  ...
</div>

Cascade Layers (@layer)

/* Tailwind artık native cascade layers kullanıyor */
@layer theme, base, components, utilities;

/* Bu sayede stil öncelik sırası daha kontrollü */
@layer components {
  .btn {
    @apply px-4 py-2 rounded;
  }
}

P3 Wide Gamut Renkler

/* Daha canlı renkler için P3 color space */
.vibrant-bg {
  background-color: oklch(70% 0.25 250);
}

/* Tailwind'in yeni renk paleti */
<div class="bg-blue-500">
  <!-- P3 destekleyen ekranlarda daha canlı mavi -->
</div>

Adım 1: Paketleri Güncelle (Step 1: Update Packages)

# npm ile
npm install tailwindcss@latest

# veya yarn ile
yarn add tailwindcss@latest

# veya pnpm ile
pnpm add tailwindcss@latest

Adım 2: Vite Plugin Kur (Step 2: Install Vite Plugin)

# Vite kullanıyorsanız (recommended)
npm install @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

Adım 3: CSS Dosyasını Güncelle (Step 3: Update CSS File)

/* Eski (v3) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Yeni (v4) */
@import "tailwindcss";

Adım 4: Config'i CSS'e Taşı (Step 4: Move Config to CSS)

/* tailwind.config.js içeriğini CSS'e taşı */
@import "tailwindcss";

@theme {
  /* Özel renkler */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;

  /* Özel fontlar */
  --font-display: "Cal Sans", sans-serif;

  /* Özel spacing */
  --spacing-128: 32rem;
}

Vite + Tailwind CSS 4.0 (Önerilen / Recommended)

# Yeni Vite projesi oluştur
npm create vite@latest my-project -- --template react

# Proje dizinine gir
cd my-project

# Tailwind CSS kur
npm install tailwindcss @tailwindcss/vite

# vite.config.js güncelle

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

src/index.css

@import "tailwindcss";

/* Özelleştirmeler buraya */
@theme {
  --color-brand: #0ea5e9;
}