Tailwind CSS 4: yeni motor ve yapılandırma

Tailwind CSS 4, Ocak 2025’te kararlı sürüm olarak yayımlandı. Beş yıl önce utility-first yaklaşımı benimsediğimde çevremden ciddi itiraz gördüm; şimdi aynı insanlar Tailwind kullanıyor. Büyük sürüm geçişleri her zaman bir şeyler kırar, her zaman bir şeyler kazandırır. Burada neyin kırıldığına ve neyin kazanıldığına sakin bir bakış atmak istiyorum.

Tailwind 3’ten 4’e geçişin en görünür değişikliği tailwind.config.js dosyasının artık zorunlu olmaması. Bu dosyayı yıllarca yazdım, okudum, başkalarının projelerinde ezdim. Gitmesine üzülmüyorum.

Oxide motoru: ne değişti

Tailwind 4’ün altında Oxide adı verilen yeni bir derleme motoru çalışıyor. Rust ile yazılmış bu motor, önceki JavaScript tabanlı motora kıyasla full build sürelerinde on kata kadar daha hızlı, incremental build’lerde ise yüz kata kadar daha hızlı olduğunu iddia ediyor.

Geliştirme ortamında bu farkı gerçekten hissediyorsunuz. Büyük bir projeyi Tailwind 3 ile derlerken beklediğiniz süre, 4’te neredeyse kaybolmuş oluyor. Production derlemeleri de bundan nasibini alıyor, ancak orada süre zaten birkaç saniyeydi; asıl fark geliştirme döngüsünde.

CSS-öncelikli yapılandırma

Tailwind 4’ün en büyük paradigma değişikliği yapılandırmanın CSS içine taşınması. Artık tema özelleştirmeleri ve eklentiler JavaScript dosyasında değil, doğrudan CSS’te @theme direktifi aracılığıyla tanımlanıyor.

@import "tailwindcss";

@theme {
  --color-brand: oklch(55% 0.2 250);
  --font-display: "Inter", sans-serif;
  --spacing-18: 4.5rem;
}

Bu yaklaşımın birkaç sonucu var. Birincisi, yapılandırma artık CSS değişkeni (CSS custom property) olarak çalışıyor; bu hem tarayıcıda hem JavaScript’te erişilebilir demek. İkincisi, tailwind.config.js dosyasını kaldırmak, araç zincirini (toolchain) biraz daha sadeleştiriyor. Üçüncüsü ise mevcut projelerde geçiş maliyeti oluşturuyor.

Geçiş maliyeti

v3’ten v4’e geçişte en çok dikkat edilmesi gereken noktalar şunlar:

• @tailwind base/components/utilities yönergeleri kaldırıldı, yerini @import "tailwindcss" aldı.
• theme() ve screen() fonksiyonları artık CSS değişkenleriyle değiştirildi.
• Birçok JIT (Just-In-Time) varsayılanı değişti; özellikle ring, shadow ve border renk varsayılanları.
• Özel eklentiler plugin() API’si yerine CSS veya JavaScript ile yazılabiliyor, ama API hâlâ var.

Tailwind ekibinin sunduğu @tailwindcss/upgrade CLI aracı bu geçişin büyük bölümünü otomatize ediyor. Küçük bir projede çalıştırdım; çoğu değişiklik otomatik uygulandı, kalan birkaç manuel adım da belgelenmiş durumdaydı.

npx @tailwindcss/upgrade

Büyük bir projede tam güvenmeden önce bu aracın çıktısını gözden geçirmek gerekiyor. Otomatik geçişler genellikle doğru, ama projeye özgü özelleştirmeler zaman zaman gözden kaçabiliyor.

Vite eklentisi ve CSS-first import

Tailwind 4 artık PostCSS eklentisinin yanı sıra birinci sınıf bir Vite eklentisi sunuyor. Vite kullanan projelerde PostCSS yapılandırması yerine bu eklentiyi kullanmak daha temiz:

// vite.config.js
import tailwindcss from "@tailwindcss/vite";

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

Bu konfigürasyonla CSS dosyanızdaki @import "tailwindcss" satırı yeterli; ayrı bir PostCSS config dosyasına gerek kalmıyor.

Yeni yardımcı sınıflar

v4’te gelen birkaç yeni yardımcı sınıf dikkat çekici. field-sizing-content ile <textarea> elemanlarının içeriğe göre otomatik boyutlanması artık tek sınıfla mümkün. color-scheme yardımcı sınıfları karanlık mod (dark mode) geçişlerini daha doğrudan kontrol ediyor. inset-shadow-* ile iç gölge (inset shadow) desteği genişledi.

Değerlendirme

Tailwind 4, “işe yarar ve biriktirdiğim tüm bilgi geçersiz olacak” korkusuyla yaklaşılacak bir sürüm değil. Temel utility-first felsefesi değişmedi. Oxide motoru gerçek bir hız kazanımı sunuyor. CSS-öncelikli yapılandırma, uzun vadede yapılandırmanın daha doğal bir yerde — CSS’in içinde — durmasını sağlıyor.

Mevcut projelerde geçiş için acele etmiyorum. Yeni projelerde ise artık v4 ile başlamak doğal seçim. Büyük sürüm atlamalarında her zaman olduğu gibi: aracın değişimi ekosistemi değiştiriyor, ama yapı taşlarının mantığı aynı kalıyor. Bunu okuyarak değil kullanarak anlıyorsunuz.