Tailwind CSS v4, henüz alfa sürümünde, büyük yenilikler ve değişiklikler sunuyor. İşte öne çıkanlar:

Yeni Bir Motor: Hız için Tasarlandı

1. Baştan Yazım: Yeni motor, mevcut bilgilerle yeniden tasarlandı, daha az kodla daha hızlı çalışıyor.
2. 10 Kat Daha Hızlı: Örneğin, Tailwind CSS web sitesi 960ms yerine 105ms’de tamamen derleniyor.
3. Daha Küçük Boyut: Yeni motor, %35 daha küçük boyutlu.
4. Rust ile Güçlendirilmiş: Performans kritik parçalar Rust ile yazıldı, çekirdek TypeScript’te kaldı.
5. Tek Bağımlılık: Yeni motor yalnızca Lightning CSS'e bağımlı.
6. Özel CSS Ayrıştırıcısı: Daha hızlı ve ihtiyaçlara özel tasarlandı, PostCSS’e kıyasla 2 kat hızlı.

• CSS Modül Desteği: Artık modüler bir yapı ile çalışıyor, bu da Tailwind'in parçalarını bağımsız olarak kullanmanıza olanak tanıyor. Örneğin, sadece belirli bir katmanı (base, utilities, vb.) yükleyebilirsiniz.

• Kullanıcı Tanımlı Direktifler:
• • @utility: Özel yardımcı sınıflar tanımlamak için.
  • @variant: Özel varyantlar eklemek için (örneğin, farklı cihazlar için).
  • @plugin: Yeni eklentiler yüklemek için.
• PostCSS ve CLI Değişiklikleri: PostCSS eklentisi ayrı bir paket olarak taşındı ve CLI, bağımsız bir @tailwindcss/cli paketine dönüştü.

• Modern Özellikler:Geniş renk yelpazesi (OKLCH formatı), kapsayıcı sorgular (container queries) ve @starting-style gibi modern CSS özellikleri destekleniyor​

main.css

@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

• Artık JS Konfigürasyon Gerekmiyor: Artık bir CSS dosyası içinde tüm ayarları yapabiliyorsunuz, bu da JavaScript konfigürasyonunu opsiyonel hale getiriyor.

• Geriye Dönük Uyum ve Değişiklikler: Eski bazı özellikler kaldırıldı veya güncellendi. Örneğin, bg-opacity-* gibi eski opaklık sınıfları artık kullanılmıyor; bunun yerine yeni /50 tarzı sınıflar kullanılıyor.

index.html

<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
  <div class="group-has-focus:opacity-100">
    <!-- ... -->
  </div>
</div>

• Performans ve Kullanım Kolaylığı: Yeni sürüm, daha hızlı derleme ve daha az bağımlılık gereksinimi sunuyor.

LinkedIn

https://www.linkedin.com/in/yakup-tetik-8543671b4/

GitHub

https://github.com/yakuptetik

Daha detaylı bilgi için Tailwind CSS Blog sayfasını ziyaret edebilirsiniz.