Tailwind v4 CSS-First Konfigürasyon

Tailwind config dosyası nerede?

Tailwind CSS, sürüm 4.0 ile birlikte büyük bir yenilik yaptı ve konfigürasyon dosyasını kaldırarak, tüm tema ve stil yapılandırmalarını doğrudan CSS üzerinden yapma imkânı sundu. Bu değişiklik, geliştiricilere daha esnek ve modern bir yapı sunuyor.

Tailwind 3.x sürümünde projeye özel renkler, fontlar veya spacing değerleri tanımlamak için mutlaka bir tailwind.config dosyası oluşturuyorduk:

// tailwind.config

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          100: '#EA6365',
          DEFAULT: '#FA7275'
        }
      }
    }
  }
}

Fakat artık tailwind.config dosyasına gerek kalmadı; onun yerine CSS dosyası kullanarak tanımlamaları yapabiliyoruz.

Bu yöntemle doğrudan Tailwind'e tema genişletmesi yapmıyorsun. Bunun yerine CSS değişkenlerini kullanıyorsun ve Tailwind sınıfları içinde bu değişkenleri kullanıyorsun.

/* css dosyası */
@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... */
  --color-border: var(--border);
  --color-primary: #FF0099;
  --color-secondary: #a1a1a1;
  /* ... */
  --padding-smallxx: 0.5rem;
  --padding-large: 1.5rem;
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... */
  --border: oklch(0.922 0 0);
}

<!-- html içinde bu şekilde kullanılabilir -->
<h2 className="bg-amber-50 font-extrablack text-secondary p-smallxx">Nasılsınız?</h2>

🎨 Mesela .bg-background, .text-foreground, .border-border gibi Tailwind utility class'larını, @layer base'te yazdığımız @apply ile birleştirebiliyoruz:

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Bu da demek oluyor ki:

• border-border → border-color: var(--border);
• bg-background → background-color: var(--background);
• text-foreground → color: var(--foreground);

Yani Tailwind class'ları artık arkada CSS değişkenlerini referans alıyor.

Baktığımız zaman aslında config Tailwind tema ile sınırlıydı; yeni yöntemle ise CSS değişkeni olduğu için çok daha esnek, modlar arasında kolay geçiş yapılabiliyor (örnek: .dark).

/* Global CSS değişkenlerini tanımlıyoruz */
:root {
  --color-primary: #3490dc;      /* Mavi Renk */
  --color-secondary: #ffed4a;    /* Sarı Renk */
  --color-background: #f8fafc;   /* Arka Plan Rengi */
  --color-foreground: #2d3748;   /* Yazı Rengi */
}

/* Dark modda renkleri değiştirecek değişkenler */
.dark {
  --color-primary: #1d4ed8;      /* Koyu Mavi */
  --color-secondary: #fbbf24;    /* Koyu Sarı */
  --color-background: #2d3748;   /* Koyu Arka Plan */
  --color-foreground: #f7fafc;   /* Beyaz Yazı Rengi */
}

Bu sayede, kullanıcıların sistem tercihlerine göre otomatik tema geçişleri yapılabilir.

Ayrıca, CSS özellikleriyle entegrasyon konusunda da yenilikler bulunuyor:

• @property ile özel CSS özelliklerinin kaydedilmesi
• color-mix() ile renk karıştırma desteği

/* CSS değişkenlerini tanımlıyoruz */
@layer utilities {
  .bg-mixed {
    background-color: color-mix(in srgb, #f00 50%, #00f 50%);
  }
}

/* html kullanımı:
<div className="bg-mixed">
  <h1 className="text-white text-3xl">Home</h1>
</div>
*/

• @starting-style ile animasyon başlangıç stilleri
• not-* varyantı ile belirli durumları dışlama

<!-- arka plan rengini green-500 yapacak, ancak sadece dark modda değilse -->
<div class="not-dark:bg-green-500 bg-mixed p-10">
  <h1 class="text-white text-3xl">Home</h1>
</div>

🚀 Sonuç

Tailwind CSS v4.0, geliştiricilere daha esnek, hızlı ve modern bir yapı sunuyor. Konfigürasyon dosyasının kaldırılması ve CSS-first yaklaşımı, stil yönetimini daha sezgisel ve yönetilebilir hale getiriyor. Eğer siz de bu yenilikleri keşfetmek istiyorsanız, Tailwind CSS v4.0 dokümantasyonuna göz atabilirsiniz.

Keyifli kodlamalar 👨‍💻 🎉

Bu yazı ilk olarak Medium'da yayınlandı.