Tailwind CSS v4: Sıfırdan Tam Rehber — Yeni Özellikler ve CSS-First Yaklaşım

Tailwind CSS v4: Her Şey Yeniden Yazıldı

Tailwind CSS v4, sadece bir güncelleme değil; mimariden temele kadar yeniden yazılmış bir framework. Rust ile inşa edilmiş yeni Oxide Engine sayesinde build süreleri dramatik biçimde düşerken, tailwind.config.js dosyasına olan bağımlılık tamamen ortadan kalkıyor. CSS-first yaklaşımıyla artık her şeyi doğrudan CSS içinde yapılandırıyorsunuz.

Kurulum ve CSS-First Yapılandırma

v4'te artık ayrı bir config dosyası yok. Her şey doğrudan CSS dosyandan yönetiliyor:

# Kurulum
npm install tailwindcss@next @tailwindcss/vite

# Vite için (vite.config.ts)
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

/* globals.css — Artık tailwind.config.js yerine burası */
@import "tailwindcss";

/* Özel tema değişkenleri artık CSS custom properties ile */
@theme {
  --color-brand: oklch(55% 0.2 260);
  --color-brand-hover: oklch(50% 0.2 260);

  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius-card: 12px;
  --spacing-section: 80px;

  /* Breakpoint tanımları */
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1920px;
}

/* Özel utility oluşturma — artık @layer utilities ile */
@utility container-tight {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: theme(--spacing-4);
}

Yeni Özellikler: v3'ten v4'e Ne Değişti?

Özellik	v3	v4
Yapılandırma	tailwind.config.js	CSS @theme bloğu
Build motoru	PostCSS (JS)	Oxide (Rust) — 10x hızlı
İçerik tarama	content: [] manuel	Otomatik (zero-config)
CSS değişkenleri	Sınırlı	Tam @theme entegrasyonu
Renk sistemi	HEX / RGB	OKLCH (geniş gamut)
Gradient	Temel	Açı, radyal, konik desteği

Yeni Yardımcı Sınıflar ve Varyantlar

...



  



...



  
Her li otomatik padding ve border alır
  
CSS seçici yazmana gerek yok




  Hover olmayanda %60 opaklık




  
    Grup hover'da beyaz metin
  

OKLCH Renk Sistemi ile Tutarlı Marka Renkleri

v4'te renkler artık varsayılan olarak OKLCH renk uzayında tanımlanıyor. Bu, insan gözüne daha doğal ve her tonun gerçekten eşit parlaklıkta görünmesini sağlıyor.

@theme {
  /* OKLCH: oklch(parlaklık chroma ton) */
  --color-brand-50:  oklch(97% 0.02 260);
  --color-brand-100: oklch(93% 0.05 260);
  --color-brand-200: oklch(87% 0.09 260);
  --color-brand-300: oklch(78% 0.13 260);
  --color-brand-400: oklch(68% 0.17 260);
  --color-brand-500: oklch(57% 0.20 260);  /* Ana renk */
  --color-brand-600: oklch(48% 0.20 260);
  --color-brand-700: oklch(40% 0.18 260);
  --color-brand-800: oklch(32% 0.14 260);
  --color-brand-900: oklch(24% 0.10 260);
}

/* Kullanım — normal Tailwind sınıfı gibi */
/* bg-brand-500, text-brand-300, border-brand-700 */

v3'ten v4'e Geçiş

Mevcut bir v3 projesini v4'e taşımak için Tailwind'in resmi geçiş aracını kullan:

# Otomatik migration aracı
npx @tailwindcss/upgrade@next

# Bu araç:
# 1. tailwind.config.js içeriğini CSS @theme bloğuna dönüştürür
# 2. Değişmiş sınıf adlarını günceller (örn: shadow-sm → shadow-xs)
# 3. Kaldırılan plugin'ler için uyarı verir