Tailwind CSS v4: PostCSS'e Veda, Hıza Merhaba

Tailwind CSS v4.0

14 Ocak 2025'te genel erişime açıldı

Stable

01Neden v4?

Tailwind CSS, 2019'dan bu yana utility-first CSS'in en popüler temsilcisi oldu. Ama v3 ile birlikte gelen JIT motoru, tailwind.config.js dosyasının giderek karmaşıklaşması ve PostCSS bağımlılığı — tüm bunlar, ekibin sıfırdan bir şeyler inşa etmesi için yeterli nedendi.

v4'ün temel hedefi şu: daha hızlı, daha az konfigürasyon, daha çok CSS standartları. Ve spoiler — büyük ölçüde başarıyorlar.

02Oxide Engine

v4'ün kalbinde Oxide adı verilen, Rust ile yazılmış yeni bir build engine var. Bu geçiş, derleme sürelerinde dramatik bir iyileşme sağlıyor:

İlk Derleme

~1.500ms

~35ms

43× daha hızlı

Artımlı

~150ms

~4ms

37× daha hızlı

ℹ

Nasıl ölçüldü?

Bu rakamlar Tailwind'in kendi benchmark testlerinden alınmıştır. Gerçek proje boyutuna göre oranlar değişebilir, ancak genel eğilim tutarlıdır.

03CSS-First Yaklaşım

v3'te tüm konfigürasyon JavaScript'te yapılırdı. v4 bu düzeni tersine çeviriyor: artık konfigürasyon doğrudan CSS dosyasında, @import "tailwindcss" ile başlıyor.

css — v3 (eski)

/* postcss.config.js */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

/* tailwind.config.js */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: { brand: '#0ea5e9' }
    }
  }
}

css — v4 (yeni)

/* globals.css — tek dosya, hepsi burada */
@import "tailwindcss";

@theme {
  --color-brand: #0ea5e9;
  --font-display: 'Geist', sans-serif;
  --radius-card: 0.75rem;
}

PostCSS konfigürasyonu artık gerekli değil. Vite kullanıyorsanız @tailwindcss/vite plugin'i yeterli.

04@theme Direktifi

@theme bloğunda tanımladığınız her değişken, otomatik olarak hem CSS custom property hem de Tailwind utility class olarak kullanılabilir hale geliyor.

css

@theme {
  /* Bu tanım şunları üretir:
     - CSS var: --color-electric
     - Utility: bg-electric, text-electric, border-electric
  */
  --color-electric: oklch(65% 0.25 250);

  /* Spacing */
  --spacing-18: 4.5rem; /* → p-18, m-18, gap-18 */

  /* Animasyonlar */
  --animate-slide-in: slide-in 0.3s ease-out;
}

✦

OKLCH renk uzayı

v4, renk tanımlarında OKLCH kullanımını teşvik ediyor. P3 geniş renk gamutunu destekleyen modern tarayıcılarda çok daha canlı renkler elde ediyorsunuz.

05Yeni Özellikler

v4 salt bir refactor değil — yeni utility'ler ve variant'larla geliyor:

field-sizing-contentYeni utility

Textarea'ların içeriğe göre otomatik büyümesi artık tek class ile mümkün.

@starting-style desteğiYeni variant

display: none'dan animate etmek artık pure CSS ile mümkün. JS opacity trick'lerine elveda.

not-* variantYeni variant

not-hover:opacity-50 gibi negasyon variant'ları artık built-in olarak geliyor.

inert variantYeni variant

inert attribute'una sahip elementler için özel stil tanımlayabilirsiniz.

06Geçiş Süreci

v3'ten v4'e geçiş için resmi migration tool mevcut. Çoğu breaking change otomatik çözülüyor:

bash

# Otomatik migration
npx @tailwindcss/upgrade@next

# Manuel kurulum (yeni proje)
npm install tailwindcss@next @tailwindcss/vite

v3 ile v4 arasındaki temel farkların özeti:

Özellik

v4 ✦

Konfigürasyon

tailwind.config.js

CSS @theme direktifi

Build aracı

PostCSS zorunlu

Vite plugin / CLI

İlk derleme

~1.5s

~35ms

Artımlı derleme

~150ms

~4ms

CSS değişkenleri

Manuel

Otomatik üretim

dark: variant

class / media

+ @custom-variant

⚠

Breaking changes var

bg-opacity-*, text-opacity-* gibi utility'ler kaldırıldı. Bunların yerine artık bg-black/50 sözdizimi kullanılıyor. Migration tool büyük çoğunluğunu otomatik dönüştürüyor.

07Sonuç

Tailwind CSS v4, hem bir teknik yeniden yazım hem de felsefi bir kırılma noktası. CSS-first yaklaşım, modern web standartlarına (cascade layers, custom properties, OKLCH) daha sıkı yaslanmak anlamına geliyor — bu iyi bir şey.

Build hızı farkı günlük geliştirme deneyiminde gözle görülür biçimde hissediliyor. Özellikle büyük projelerde hot-reload gecikmelerinin neredeyse sıfırlanması, akışı dramatik ölçüde iyileştiriyor.

Yeni bir projeye başlıyorsanız: doğrudan v4 kullanın. Mevcut bir projeniz varsa: migration tool'u deneyin, büyük ihtimalle sorunsuz geçeceksiniz.

#tailwindcss#css#frontend#performans

Arda Abacı

Jr. Full-Stack Developer. Next.js, TypeScript ve modern CSS'e meraklı. Öğrendiklerimi burada yazıyorum.

Tüm yazılar•Sonraki yazı