Tailwind CSS v4: Yenilikler ve Geçiş Rehberi

Tailwind CSS v4 Nedir?

Tailwind CSS v4, popüler utility-first CSS framework'ünün en büyük güncellemesidir. Yeni Oxide engine ile birlikte gelir ve önemli performans iyileştirmeleri sunar.

Tailwind v4, v3'e göre %10x daha hızlı build süreleri vaat ediyor.

Öne Çıkan Yenilikler

1. Oxide Engine

Yeni Rust tabanlı engine:

• 10x daha hızlı build süreleri
• Daha az memory kullanımı
• Native CSS nesting desteği

2. CSS-First Yapılandırma

Artık JavaScript config yerine CSS kullanabilirsiniz:

1/* globals.css */
2@import "tailwindcss";
3
4@theme {
5  --color-primary: #17cb96;
6  --color-secondary: #383643;
7  --font-display: "Cal Sans", sans-serif;
8  
9  --breakpoint-3xl: 1920px;
10  
11  --spacing-128: 32rem;
12}

3. Container Queries

Native container query desteği:

1<div class="@container">
2  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
3    <!-- Container boyutuna göre responsive -->
4  </div>
5</div>

4. Yeni Utility'ler

1<!-- Gradient pozisyonu -->
2<div class="bg-gradient-to-r from-primary from-20% via-secondary via-50% to-accent to-80%">
3
4<!-- 3D transforms -->
5<div class="rotate-x-12 rotate-y-45 perspective-1000">
6
7<!-- Modern renk fonksiyonları -->
8<div class="bg-primary/50 text-oklch-[0.7_0.15_180]">

Geçiş Rehberi

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

1npm install tailwindcss@next @tailwindcss/postcss@next

Adım 2: PostCSS Config

1// postcss.config.js
2export default {
3  plugins: {
4    "@tailwindcss/postcss": {},
5  },
6};

Adım 3: CSS'e Geç

1/* tailwind.config.js yerine */
2@import "tailwindcss";
3
4@theme {
5  /* özelleştirmeler */
6}

Adım 4: Breaking Changes

Dikkat edilmesi gereken değişiklikler:

Performans Karşılaştırması

v3 vs v4 build süreleri:

1Large project (50k+ classes):
2- v3: 4.2s
3- v4: 0.4s (10x faster!)
4
5Incremental rebuilds:
6- v3: 180ms
7- v4: 8ms (22x faster!)

Sonuç

Tailwind CSS v4, modern CSS özellikleri ve dramatik performans iyileştirmeleri ile geliyor. Yeni projeler için v4 ile başlamanızı, mevcut projeleri ise stabil sürüm çıktığında güncellemenizi öneririz.

Fribe.co olarak modern frontend teknolojileri kullanıyoruz. Projenizi konuşalım!