Tailwind CSS v4: Yenilikler ve Geçiş Rehberi â€” CodeForge â€” CodeForge

Tailwind CSS v4, yeniden tasarlanmış bir motor, CSS-first yapılandırma ve native cascade layers ile geldi. JavaScript config dosyası artık zorunlu değil, PostCSS pipeline daha hızlı, yeni özellikler ise modern CSS standartlarını doğrudan kullanmanı sağlıyor. İşte bilmen gereken her şey.

v3 → v4 En Büyük Değişiklikler

// PLAINTEXT //

v3:                              v4:
tailwind.config.js               @import "tailwindcss" (CSS'de)
PostCSS tabanlı (yavaş)          Oxide engine (Rust, ~10x hızlı)
theme() fonksiyonu               CSS değişkenleri (var(--color-blue-500))
purge config                     Otomatik içerik tespiti
plugin sistemi                   CSS @plugin
arbitrary değerler [...]         Genişletilmiş, daha az gerek

Kurulum

// BASH //

npm install tailwindcss@next @tailwindcss/vite@next
 
# Vite için (önerilen)
# vite.config.ts
import tailwindcss from '@tailwindcss/vite'
 
export default {
  plugins: [tailwindcss()],
}

// CSS //

/* globals.css — artık tailwind.config.js YOK */
@import "tailwindcss";
 
/* Özel tema değişkenleri doğrudan CSS'de */
@theme {
  --color-brand-500: #6d28d9;
  --color-brand-600: #5b21b6;
  --font-display: "Inter Variable", sans-serif;
  --radius-card: 12px;
  --spacing-section: 80px;
}

CSS-First Yapılandırma

// CSS //

/* tailwind.config.js yerine CSS */
@import "tailwindcss";
 
@theme {
  /* Renkler */
  --color-primary: oklch(55% 0.2 270);
  --color-surface: oklch(15% 0.02 270);
 
  /* Font */
  --font-mono: "JetBrains Mono", monospace;
 
  /* Spacing override */
  --spacing-18: 4.5rem;
 
  /* Breakpoint özelleştirme */
  --breakpoint-3xl: 1920px;
}
 
/* Mevcut temayı koru, sadece ekle */
@theme extend {
  --color-neon: #00ff88;
}

CSS Değişkenleriyle Dinamik Tema

v4'te tüm design token'lar CSS değişkeni olarak erişilebilir:

// CSS //

/* v3'teki theme() fonksiyonu */
.button { background: theme('colors.blue.500'); }
 
/* v4 — native CSS değişkeni */
.button { background: var(--color-blue-500); }

// JAVASCRIPT //

// JavaScript'te de erişilebilir
const style = getComputedStyle(document.documentElement);
const brand = style.getPropertyValue('--color-brand-500');

Yeni Utility'ler

Container Queries

// HTML //

<!-- @container ile parent boyutuna göre stil -->
<div class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3 grid grid-cols-1">
    <!-- Parent 768px+ olduğunda 2 sütun -->
  </div>
</div>

Field Sizing

// HTML //

<!-- Textarea otomatik boyutlanma -->
<textarea class="field-sizing-content resize-none"></textarea>

Not Selector

// HTML //

<!-- Belirli elementler hariç stil -->
<ul class="*:not-last:border-b [&>li:not(:last-child)]:border-b">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

Color Mix

// HTML //

<!-- İki rengi CSS ile karıştır -->
<div class="bg-[color-mix(in_oklch,var(--color-blue-500)_50%,white)]"></div>

Starting Style (Giriş Animasyonu)

// HTML //

<!-- Elementin ilk render'ında animasyon -->
<div class="starting:opacity-0 starting:translate-y-4 transition-all duration-300">
  Sayfa yüklenirken bu element yukarıdan gelir
</div>

Performans: Oxide Engine

// PLAINTEXT //

Soğuk derleme: v3 ~3.5s → v4 ~350ms
Artımlı derleme: v3 ~200ms → v4 ~5ms

Oxide, Rust ile yazılmış yeni CSS işleme motorudur. PostCSS'ye bağımlılık azaldı; Vite plugin direkt CSS transform yapıyor.

@plugin API

// CSS //

/* v3'te plugins[] dizisinde JavaScript */
/* v4'te CSS'de tanımlama */
 
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
 
/* Kendi plugin'in */
@plugin "./src/tailwind-plugins/gradient-text.css";

Dark Mode

// CSS //

/* v4 — CSS media query ile */
@variant dark (&:where(.dark, .dark *));
 
/* Sistem tercihine göre (default) */
@media (prefers-color-scheme: dark) {
  :root { --color-bg: oklch(10% 0.01 270); }
}

// HTML //

<!-- dark: prefix çalışmaya devam ediyor -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  İçerik
</div>

Geçiş Rehberi (v3 → v4)

// BASH //

# Otomatik migrasyon aracı
npx @tailwindcss/upgrade@next
 
# Manuel değişiklikler:
# 1. tailwind.config.js → @theme {} bloku
# 2. content: [...] → Kaldır (otomatik tespit)
# 3. theme.extend → @theme extend {}
# 4. plugins: [...] → @plugin "..."
# 5. corePlugins.preflight → @import "tailwindcss/preflight"

// CSS //

/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* v4 */
@import "tailwindcss";

Next.js ile Kurulum

// JAVASCRIPT //

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {};
export default nextConfig;

// BASH //

# Next.js 15+ otomatik destekler
npm install tailwindcss@next @tailwindcss/postcss@next
 
# postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Özet

Tailwind CSS v4'ün temel değişimi: JavaScript config → CSS @theme, PostCSS → Oxide (Rust), theme() fonksiyonu → var(--token-adi). Geçiş aracı (npx @tailwindcss/upgrade) işin %80'ini otomatik yapıyor. Container queries, starting: varyantı ve field-sizing öne çıkan yeni özellikler. Performans artışı ise özellikle büyük projelerde fark edilir düzeyde.