Tailwind CSS v4: Gerçekte Ne Değişti ve Geçiş Yapmalı mısın | Akousa

// v3 — tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a5f",
        },
      },
      fontFamily: {
        display: ["Inter Variable", "sans-serif"],
      },
      spacing: {
        18: "4.5rem",
        112: "28rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

css

@import "tailwindcss";
 
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
 
  --font-display: "Inter Variable", sans-serif;
 
  --spacing-18: 4.5rem;
  --spacing-112: 28rem;
 
  --radius-4xl: 2rem;
}

css

@import "tailwindcss";
 
@theme {
  /* Önce tüm varsayılan renkleri temizle */
  --color-*: initial;
 
  /* Şimdi sadece kendi renklerini tanımla */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
}

css

/* styles/theme/colors.css */
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a5f;
  --color-brand-950: #172554;
}
 
/* styles/theme/typography.css */
@theme {
  --font-display: "Inter Variable", sans-serif;
  --font-body: "Source Sans 3 Variable", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
 
  --text-display: 3.5rem;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -0.02em;
}

css

/* v4 çıktısı — basitleştirilmiş */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* senin bileşen sınıfların */
}
 
@layer utilities {
  /* tüm üretilen utility sınıfları */
}

css

@layer components {
  /* specificity: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificity: 0-1-0 — aynı specificity ama kazanır çünkü utilities katmanı daha sonra */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — plugin yaklaşımı
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- ebeveyni container olarak işaretle -->
<div class="@container">
  <!-- viewport'a değil ebeveynin genişliğine göre responsive -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Kart 1</div>
    <div class="p-4">Kart 2</div>
    <div class="p-4">Kart 3</div>
  </div>
</div>

html

<div class="@container/sidebar">
  <div class="@container/card">
    <!-- card container'ını sorgular -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- sidebar container'ını sorgular -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Bu bileşen yerleştirildiği HERHANGİ bir container'a uyum sağlar -->
<article class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-[200px_1fr] gap-4">
    <img
      class="w-full @md:w-auto rounded-lg aspect-video @md:aspect-square object-cover"
      src="/post-image.jpg"
      alt=""
    />
    <div>
      <h2 class="text-lg @lg:text-xl font-semibold">Yazı Başlığı</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Yazı özeti buraya gelir...</p>
      <div class="mt-4 hidden @md:flex gap-2">
        <span class="text-xs bg-gray-100 px-2 py-1 rounded">Etiket</span>
      </div>
    </div>
  </div>
</article>

html

<!-- sonuncu hariç her çocuk border alır -->
<div class="divide-y">
  <div class="not-last:pb-4">Öğe 1</div>
  <div class="not-last:pb-4">Öğe 2</div>
  <div class="not-last:pb-4">Öğe 3</div>
</div>
 
<!-- disabled olmayan her şeye stil ver -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- data attribute'larını nega et -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">İlk öğe — kalın</li>
  <li class="nth-even:bg-gray-50">Çift satırlar — gri arkaplan</li>
  <li class="nth-odd:bg-white">Tek satırlar — beyaz arkaplan</li>
  <li class="nth-[3n+1]:text-brand-500">Her üçüncü+1 — brand rengi</li>
</ul>

html

<!-- bu div'in içindeki tüm paragraflar, herhangi bir derinlikte -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Bu vurgulanır</p>
    <div>
      <p data-highlight>Bu da, daha derinde iç içe</p>
    </div>
  </section>
</div>

/* v4'te KALDIRILDI */
bg-opacity-*     → bg-black/50 kullan (slash opacity sözdizimi)
text-opacity-*   → text-black/50 kullan
border-opacity-* → border-black/50 kullan
flex-shrink-*    → shrink-* kullan
flex-grow-*      → grow-* kullan
overflow-ellipsis → text-ellipsis kullan
decoration-slice  → box-decoration-slice kullan
decoration-clone  → box-decoration-clone kullan

// v3 plugin
plugin(function ({ addUtilities, theme }) {
  addUtilities({
    ".scrollbar-hide": {
      "-ms-overflow-style": "none",
      "scrollbar-width": "none",
      "&::-webkit-scrollbar": {
        display: "none",
      },
    },
  });
});

// v3 config — önce
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#60a5fa",
          DEFAULT: "#3b82f6",
          dark: "#1d4ed8",
        },
      },
      fontSize: {
        "2xs": ["0.65rem", { lineHeight: "1rem" }],
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
};

css

/* v4 CSS — sonra */
@import "tailwindcss";
 
@theme {
  --color-brand-light: #60a5fa;
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;
 
  --text-2xs: 0.65rem;
  --text-2xs--line-height: 1rem;
 
  --animate-fade-in: fade-in 0.5s ease-out;
}
 
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

json

{
  "@tailwindcss/typography": "^1.0.0",
  "@tailwindcss/forms": "^1.0.0",
  "@tailwindcss/container-queries": "KALDIR — artık yerleşik",
  "tailwindcss-animate": "v4 desteğini kontrol et",
  "prettier-plugin-tailwindcss": "en son sürüme güncelle"
}

css

/* data attribute yaklaşımı */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — bu varsayılan, bildirmen gerekmez */
@variant dark (@media (prefers-color-scheme: dark));

css

@import "tailwindcss";
 
@theme {
  --color-brand: var(--brand-primary, #3b82f6);
  --color-brand-light: var(--brand-light, #60a5fa);
  --color-brand-dark: var(--brand-dark, #1d4ed8);
}
 
/* Marka override'ları */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metrik	v3 (Node)	v4 (Oxide)	İyileşme
İlk build	4.280ms	387ms	11x
Artımlı (1 dosya düzenle)	340ms	18ms	19x
Tam rebuild (temiz)	5.100ms	510ms	10x
Dev sunucu başlangıcı	3.200ms	290ms	11x

Variant	Min-width
`@sm`	24rem (384px)
`@md`	28rem (448px)
`@lg`	32rem (512px)
`@xl`	36rem (576px)
`@2xl`	42rem (672px)

Kurulum	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Soğuk başlangıç	4,8s	2,1s	1,3s
HMR (CSS değişikliği)	450ms	180ms	40ms

Metrik	v3	v4
Tepe bellek (build)	380MB	45MB
Kararlı durum (dev)	210MB	28MB

Büyük Resim: v4 Gerçekte Ne

@theme ile CSS-First Yapılandırma

Varsayılan Temayı Override vs Extend Etme

Birden Fazla Tema Dosyası

Oxide Motoru: Gerçekten 10 Kat Daha Hızlı

Neden Bu Kadar Hızlı?

Hız Gerçekten Önemli mi?

Native @layer Entegrasyonu

Özel Utility'ler Ekleme

Özel Variant'lar

Container Query'ler: Yerleşik, Plugin Yok

Temel Kullanım

İsimli Container'lar

Bu Neden Önemli

Gerçekten Önemli Yeni Variant'lar

starting: Variant'ı

not-* Variant'ı

nth-* Variant'ları

in-* Variant'ı (Ebeveyn Durumu)

**: Derin Evrensel Variant

Kırıcı Değişiklikler: Gerçekte Ne Bozuldu

1. Yapılandırma Formatı

2. Kaldırılan Deprecated Utility'ler

3. Varsayılan Renk Paleti Değişiklikleri

4. İçerik Algılama

5. Plugin API Değişiklikleri

6. JIT Tek Mod

7. Bazı Variant Sözdizimi Değişiklikleri

Geçiş Rehberi: Gerçek Süreç

Adım 1: Resmi Codemod'u Çalıştır

Codemod'un İyi Hallettiği

Codemod'un Halletmediği

Adım 2: PostCSS Yapılandırmasını Düzelt

Adım 3: Tema Yapılandırmasını Dönüştür

Adım 4: Görsel Regresyon Testi

Adım 5: Üçüncü Taraf Bağımlılıkları Güncelle

Next.js ile Çalışma

PostCSS Yaklaşımı (Next.js İçin Önerilen)

CSS Import Sırası

Dark Mode

Turbopack Uyumluluğu

Performans Derinlemesine: Build Hızının Ötesi

Bellek Kullanımı

CSS Çıktı Boyutu

Tema Değerlerinin Tree Shaking'i

İleri Düzey: Çoklu Marka İçin Tema Birleştirme

v3'ten Neleri Özlüyorum

Geçiş Yapmalı mısın?

Şimdi Geçiş Yap Eğer:

Bekle Eğer:

Geçiş Yapma Eğer:

Dürüst Görüşüm

İlgili Yazılar

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide

`starting:` Variant'ı

`not-*` Variant'ı

`nth-*` Variant'ları

`in-*` Variant'ı (Ebeveyn Durumu)

`**:` Derin Evrensel Variant