Tailwind CSS 4: Yenilikler ve Uygulama Pratikleri

Tailwind CSS 4, 22 Ocak 2025'te kararlı olarak yayımlandı. Resmî v4.0 duyurusu, yeni derleme motoru, CSS-first konfigürasyon, otomatik kaynak tespiti, Lightning CSS kullanımı ve modern CSS özelliklerini başlıca değişiklikler olarak listeliyor. Bu rehber, özellikleri ve v3'ten geçiş risklerini abartısız biçimde ele alıyor.

Tailwind CSS 4'te Neler Değişti?

Yeni Derleme Motoru

Tailwind CSS 4, yeniden tasarlanan bir derleme motoru kullanır. Bunu "tamamen Rust ile yazıldı" diye özetlemek isabetli değildir; proje farklı katmanlarda Rust ve TypeScript kullanır.

Tailwind ekibinin kendi projelerinde yayımladığı benchmark'lar tam build ve incremental build sürelerinde belirgin iyileşme gösteriyor. Duyurudaki "5 kata kadar" ve "100 katın üzerinde" ifadeleri vendor benchmark'ıdır; her repo için beklenen sonuç veya garanti değildir. Kaynak sayıları kullanılacaksa test projesi, medyan süre ve "yeni CSS üretmeyen incremental build" ayrımıyla birlikte aktarılmalıdır.

Pratikte kazanç; taranan kaynak sayısına, kullanılan bundler'a, cache durumuna ve değişikliğin yeni utility üretip üretmemesine bağlıdır. Kendi repozitorinizde soğuk tam build ile sıcak incremental build'i ayrı ölçün.

CSS-First Konfigürasyon

v4'te önerilen ana konfigürasyon modeli CSS içindeki @theme direktifidir. JavaScript config geçiş amaçlı kullanılabilir, ancak v4 tarafından otomatik algılanmaz; gerektiğinde @config ile açıkça yüklenir.

/* v3 — tailwind.config.js */
/* module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366f1',
        secondary: '#8b5cf6',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  }
} */

/* v4 — doğrudan CSS dosyasında */
@import "tailwindcss";

@theme {
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --font-sans: 'Inter', sans-serif;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

Bu yaklaşımın avantajları:

• Standart sözdizimi: Tema token'ları CSS içinde tanımlanır; editör desteği kullanılan Tailwind eklentisine de bağlıdır
• Tek kaynak: Konfigürasyon ve stiller aynı yerde
• CSS custom properties: Tema değerleri CSS custom property olarak erişilebilir
• Daha az config kodu: Temel özelleştirmeler için ayrı JavaScript config dosyası gerekmeyebilir

Lightning CSS Entegrasyonu

Tailwind CSS 4, vendor prefixing ve modern syntax dönüşümleri için Lightning CSS kullanır. Tailwind'i Next.js gibi bir ortamda entegre etmek için PostCSS akışı yine kullanılabilir; sadece eklenti ayrı @tailwindcss/postcss paketine taşınmıştır.

• Otomatik vendor prefix ekleme
• CSS nesting desteği (native)
• Otomatik minification
• Modern CSS syntax dönüşümü

Tipik v4 kurulumunda autoprefixer, postcss-import ve ayrı nesting eklentileri gerekmez. Başka PostCSS eklentileri kullanan projeler ise PostCSS'i kaldırmamalıdır.

Yeni Özellikler

1. Container Queries (Yerleşik):

<div class="@container">
  <div class="@sm:flex @sm:gap-4 @lg:grid @lg:grid-cols-3">
    <div class="@sm:w-1/3 @lg:w-auto">
      <!-- Responsive layout, parent container'a göre -->
    </div>
  </div>
</div>

Container queries, viewport yerine parent element'in boyutuna göre responsive kurallar tanımlamanızı sağlar. v4'te ayrı container-query eklentisi olmadan kullanılabilir.

2. Native CSS Nesting:

.card {
  @apply rounded-lg shadow-md;

  &:hover {
    @apply shadow-xl;
  }

  & .title {
    @apply text-xl font-bold;
  }

  & .description {
    @apply text-gray-600;
  }
}

3. Wide Gamut Renk Desteği:

@theme {
  --color-vivid-blue: oklch(0.6 0.25 260);
  --color-vivid-green: oklch(0.7 0.3 145);
  --color-vivid-red: oklch(0.6 0.25 25);
}

OKLCH, lightness, chroma ve hue bileşenleriyle renk tanımlamayı sağlar. sRGB dışındaki renklerin gösterilebilmesi seçilen koordinata, ekran gamutuna ve tarayıcıya bağlıdır; erişilebilir kontrast ve sRGB fallback davranışı ayrıca test edilmelidir.

4. 3D Transform Utility'leri:

<div class="rotate-x-12 rotate-y-6 perspective-800">
  <div class="translate-z-20 backface-hidden">
    3D dönüştürülmüş element
  </div>
</div>

v3'ten v4'e Migration Rehberi

Adım 1: Bağımlılıkları Güncelleyin

# Next.js/PostCSS kullanan projeler için
npm install tailwindcss @tailwindcss/postcss postcss

# Mevcut projeyi otomatik dönüştürmek için ayrı bir branch'te:
npx @tailwindcss/upgrade

Resmî upgrade rehberi, upgrade aracı için Node.js 20+ ister ve v4'ten önce desteklenen eski tarayıcılar gerekiyorsa v3.4'te kalmayı önerir. Otomatik aracın diff'ini ve görsel regresyonları mutlaka inceleyin.

Adım 2: Konfigürasyonu CSS'e Taşıyın

tailwind.config.js dosyanızdaki özelleştirmeleri @theme bloğuna taşıyın:

@import "tailwindcss";

@theme {
  /* colors */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-secondary: #8b5cf6;

  /* spacing (ek değerler) */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* border radius */
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* shadows */
  --shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07);
}

Adım 3: Breaking Change'leri Projeye Göre Tarayın

Sabit bir yeniden adlandırma tablosu bütün projeleri kapsamaz. Resmî upgrade aracını çalıştırın ve özellikle şunları kontrol edin:

• Kaldırılan @tailwind direktifleri ve yeni @import "tailwindcss" kullanımı
• Shadow, blur, radius ve outline varsayılanlarındaki değişiklikler
• Eski JavaScript config, plugin ve corePlugins kullanımları
• Border ve ring varsayılanlarının mevcut tasarımı değiştirip değiştirmediği
• Tarayıcı destek matrisinin Safari 16.4+, Chrome 111+ ve Firefox 128+ tabanıyla uyumu

Adım 4: PostCSS Konfigürasyonunu Temizleyin

postcss.config.js dosyanızı sadeleştirin:

// v3 — postcss.config.js
// module.exports = {
//   plugins: {
//     'tailwindcss/nesting': {},
//     tailwindcss: {},
//     autoprefixer: {},
//   }
// }

// v4 — postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Tailwind CSS vs CSS-in-JS Karşılaştırması

2026'da hâlâ sıkça sorulan soru: "Tailwind mı, styled-components/Emotion mı?"

Bu tablo performans sıralaması değildir. Gerçek CSS/JS transferi, kullanılmayan kod, hydration ve geliştirici deneyimi aynı örnek uygulama üzerinde ölçülmelidir.

Uygulama Pratikleri

1. Component Bazlı Soyutlama

Tekrarlayan class dizilerinde soyutlama sınırını kullanım yerine göre seçin. Component API'si davranış, erişilebilirlik ve prop sözleşmesini birlikte yönetebilir; @apply ise framework dışı markup veya sınırlı CSS katmanında uygun olabilir.

// Seçenek A - paylaşılan CSS sınıfı
// .btn-primary { @apply px-4 py-2 bg-primary text-white rounded-lg; }

// Seçenek B - tipli React component'i
import type { ButtonHTMLAttributes, ReactNode } from "react";

const styles = {
  primary: "bg-primary text-white hover:bg-primary-dark",
  secondary: "bg-secondary text-white hover:bg-secondary/90",
  outline: "border-2 border-primary text-primary hover:bg-primary/10",
} as const;

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  children: ReactNode;
  variant?: keyof typeof styles;
};

function Button({
  children,
  variant = "primary",
  className = "",
  ...props
}: ButtonProps) {

  return (
    <button
      className={`px-4 py-2 rounded-lg font-medium transition-colors ${styles[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

Animasyon token'ları kullanılıyorsa prefers-reduced-motion tercihi ve focus/hover durumları erişilebilirlik testine dahil edilmelidir.

2. Design Token'larını @theme ile Yönetin

@theme {
  /* Renk sistemi — semantic isimlendirme */
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #64748b;
  --color-accent: #6366f1;
  --color-destructive: #ef4444;
  --color-success: #22c55e;

  /* Typography scale */
  --font-display: 'Cal Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale (ek) */
  --spacing-page: 1.5rem;
  --spacing-section: 4rem;

  /* Animation */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

3. Responsive Tasarımda Mobile-First

<!-- Mobile-first yaklaşım -->
<div class="
  grid grid-cols-1 gap-4 p-4
  md:grid-cols-2 md:gap-6 md:p-6
  lg:grid-cols-3 lg:gap-8 lg:p-8
">
  <!-- Kartlar -->
</div>

4. Dark Mode

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  <h1 class="text-primary dark:text-primary/90">Başlık</h1>
  <p class="text-gray-600 dark:text-gray-400">Açıklama</p>
</div>

5. Performans İpuçları

• Kaynak tespiti otomatiktir: Tailwind 4, template dosyalarını varsayılan olarak tarar; monorepo veya hariç tutulan paketlerde @source gerekebilir
• Dinamik class isimlerinden kaçının: bg-${color}-500 yerine tam class ismi kullanın
• Katmanları bilinçli kullanın: Custom CSS'in theme, base, components ve utilities sırasındaki yerini kontrol edin
• Birleştirme aracını ihtiyaca göre ekleyin: clsx veya tailwind-merge her projede zorunlu değildir

Sonuç

Tailwind CSS 4; CSS-first konfigürasyon, otomatik kaynak tespiti, container queries ve 3D transform utility'leri gibi somut değişiklikler sunar. Geçişin kolaylığı, eski config ve plugin kullanımına ve desteklenen tarayıcılara bağlıdır; otomatik upgrade sonrası görsel regresyon testi gerekir.

Maviona'nın Tailwind CSS'i değerlendirme nedeni, token'ları ve utility'leri statik CSS çıktısıyla yönetebilmesidir. Bunun her proje için doğru tercih olduğu veya tek başına tutarlılık sağladığı iddia edilmez; component API'leri, tasarım token'ları ve kod inceleme kuralları yine gereklidir.

Kaynaklar ve Yöntem

Sürüm tarihi, kurulum ve migration davranışı Tailwind CSS v4 duyurusu, PostCSS kurulum rehberi ve resmî upgrade rehberi üzerinden 14 Temmuz 2026'da kontrol edildi. Vendor benchmark'ı bağımsız performans garantisi olarak yorumlanmamalıdır. Kaynaklar Maviona'yı değerlendirmez veya onaylamaz.

Tailwind CSS 4'ün projenizin tarayıcı ve bakım gereksinimlerine uygunluğunu değerlendirmek için Maviona'nın hizmetlerine göz atın.