Tailwind CSS v4: Oxide Engine, CSS-first Config ve Migration Rehberi

Tailwind CSS v4, 2024 sonunda yayınlanan ve framework''ün en büyük yeniden yazımı olan sürümdür. Yeni Oxide engine ile build süresi 10-100x hızlandı, config artık JavaScript yerine CSS''te yazılıyor, container queries native destekleniyor. Bu yazı v4''teki tüm kritik değişiklikleri ve v3''ten migration adımlarını anlatır.

Oxide Engine — Hız

İlgili rehberler: Yazılım geliştirme süreçleri · PostgreSQL optimizasyonu · Git ileri seviye komutlar · Redis nedir, nasıl kullanılır · Docker ile deploy

V4''ün yeni engine''i Rust + esbuild tabanlı. V3''teki PostCSS plugin sistemi yerine tek-geçişli CSS parser. Tipik bir proje için:

• Full rebuild: v3''te 900ms → v4''te 100ms
• Incremental build: v3''te 40ms → v4''te <5ms
• Development HMR: neredeyse anlık

CSS-first Config

V4''te tailwind.config.js opsiyonel — tema tanımları artık CSS''te @theme directive ile yazılıyor. JS yerine CSS + native custom properties.

/* v4 — tek CSS dosyasında tam tema */
@import "tailwindcss";

@theme {
    --color-brand-50:  oklch(97% 0.02 40);
    --color-brand-500: oklch(63% 0.2 40);
    --color-brand-700: oklch(45% 0.18 40);

    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans:  'DM Sans', system-ui, sans-serif;

    --breakpoint-3xl: 1920px;

    --animate-fade-in: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

Container Queries

V3''te @tailwindcss/container-queries plugin''i olarak eklenebiliyordu. V4''te core''a alındı — konteynerin genişliğine göre çocukları responsive yapabilirsin, viewport''a değil.

<div class="@container">
    <!-- Bu card'in kendi genişliği 400px'ten büyükse -->
    <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
        <!-- Hücreler card'in genişliğine göre yerleşir, ekranın değil -->
    </div>
</div>

@starting-style & @property

V4 modern CSS''i native olarak sarar. @starting-style ile giriş animasyonu bir satır, @property ile custom animasyon değerleri tanımlanabilir.

<!-- Sayfa yüklendiğinde içeri kayarak gelen element -->
<div class="starting:opacity-0 starting:translate-y-4 transition-all duration-500">
    Giriş animasyonu
</div>

<!-- Popover açılırken animasyon -->
<div popover class="opacity-0 open:opacity-100 transition">
    Popover içeriği
</div>

V3 → V4 Migration

# Otomatik migration script
npx @tailwindcss/upgrade

# Manuel değişiklikler:
# 1) tailwind.config.js'i incele — temayı @theme'e taşı
# 2) postcss.config.js'ten tailwindcss kaldır — v4 kendi PostCSS plugin'i gerektirmez
# 3) CSS import
#    V3: @tailwind base; @tailwind components; @tailwind utilities;
#    V4: @import "tailwindcss";

Kırılan Değişiklikler

• bg-opacity-*, text-opacity-* → artık bg-black/50 sözdizimi (modifier)
• flex-shrink-0 → shrink-0
• flex-grow → grow
• outline-none → outline-hidden (native outline: none accessibility''yi bozduğu için değişti)
• ring varsayılan rengi currentColor (eskiden mavi idi)
• Custom utility için @utility directive — plugin sistemi basitleşti

Custom Utility — Yeni Yol

/* v3'te plugin yazmak gerekiyordu */
/* v4'te CSS'te @utility */
@utility tab-* {
    tab-size: --value(integer);
}

/* Kullanım */
<pre class="tab-4">Tab size 4</pre>

Performance: Dev Server Hızı

# Benchmark (Tailwind ekibi ölçümü)
# Full build
v3.4: 378ms  →  v4.0: 100ms

# Incremental CSS change
v3.4: 44ms   →  v4.0: 5ms

# Incremental class add (no new CSS)
v3.4: 19ms   →  v4.0: 2ms

V4''e Geçmeli miyim?

• Yeni proje: kesinlikle v4
• Aktif geliştirilen büyük proje: migration script çalıştır, 1 haftalık sprint planla
• Legacy / donmuş proje: v3''te kal — v3 de uzun süre desteklenecek
• Plugin ekosistemi bağımlılığı varsa: kritik plugin''lerin v4 uyumluluğunu kontrol et

Modern Yazılım Geliştirme ve DevOps Pratikleri

Profesyonel yazılım geliştirme süreci üç pillar üzerine kuruludur: kaynak kontrolü (Git + GitHub/GitLab pull request akışı, code review zorunlu), CI/CD pipeline (otomatik test + lint + build + deploy), ve gözlemlenebilirlik (Sentry/Datadog/Grafana ile log, metric, trace toplama). Test piramidi (unit > integration > e2e) ile kod kalitesini garantilemek, mikroservis mimarisinde Docker container ve Kubernetes orkestrasyonu kullanmak, REST veya GraphQL API tasarımında OpenAPI/GraphQL Schema sözleşmesi tutmak modern standardlardır. Yazılım geliştirme yaşam döngüsü boyunca (gereksinim → tasarım → implementasyon → test → deploy → bakım) Agile/Scrum sprintleri 1-2 hafta, DevOps takımları sürekli teslim (continuous delivery) prensibiyle çalışır.