Tailwind CSS v4.0 ve CSS-First Konfigürasyon Devrimi

Tailwind CSS v4.0, frontend dünyasında büyük bir heyecan yarattı. Bu sürümle birlikte, alışık olduğumuz

tailwind.config.js

dosyasına veda ediyoruz. Artık her şey CSS-First felsefesiyle doğrudan CSS dosyalarımızda tanımlanyor.

CSS-First Konfigürasyon Nedir?

v3 sürümüne kadar tüm tema, renk, font ve plugin ayarlarımızı JavaScript formatında yapıyorduk. Tailwind CSS v4.0 ise projenizin CSS dosyasında

@theme

direktifini kullanarak doğrudan CSS değişkenleri tanımlamanıza imkan tanıyor:

@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --font-display: "Outfit", sans-serif;
}

Bu yapının en büyük avantajı, tanımladığınız CSS değişkenlerinin tarayıcıda da doğrudan erişilebilir olması. Yani artık JavaScript ile CSS dünyasını senkronize etmek için ekstra efor sarf etmeniz gerekmiyor.

Yeni Rust-Tabanlı Derleyici (Oxc Engine)

Tailwind v4, sıfırdan Rust dili ile yazılmış yeni bir derleme motoruyla geliyor. Bu sayede:

• Hız: Derleme süreleri v3'e kıyasla 10 kata kadar daha hızlı.
• Hafiflik: node_modules boyutu önemli ölçüde azaldı.
• Dahili PostCSS & Autoprefixer: Harici araç yükleme ihtiyacı minimuma indirildi.

Geçiş Adımları

Eğer projenizi Tailwind v4.0'a geçirmek istiyorsanız yapmanız gerekenler oldukça basit:

1. @tailwindcss/postcss

   ve

   tailwindcss

   paketlerini en son sürüme güncelleyin.

2. tailwind.config.js

   dosyasını silip ayarlarınızı

   globals.css

   içerisine taşıyın.
3. CSS dosyanızın en üstüne

   @import "tailwindcss";

   ekleyin.

v4.0 ile gelen bu sadeleşme, CSS yazma deneyimini çok daha doğal ve modern standartlara uygun hale getiriyor. Yeni projelerinizde kesinlikle kullanmanızı öneririm!