Tailwind CSS v4.0 ilerleme durumu açık kaynak olarak paylaşıldı

• Yeni yüksek performanslı motor Oxide, Tailwind CSS v4.0 için geliştiriliyor.
• Geliştirici deneyimini basitleştirmek ve web platformunun en güncel evriminden yararlanmak için tasarlandı.
• Başlangıçta v3.x sürümü olarak yayınlanması planlanıyordu, ancak yeni nesil bir framework olarak v4.0 altında yayınlanmasına karar verildi.
• Hâlâ erken aşamada ve yapılacak çok iş var, ancak denemelere başlamak için ilk herkese açık alpha sürümü etiketlenmiş durumda.

Yeni motor, hız için tasarlandı

• Yeni motor sıfırdan yeniden yazıldı ve daha az kodla daha yüksek hız sunuyor.
• En fazla 10 kat daha hızlı build süreleri sunuyor; Tailwind CSS web sitesi 105 ms'de, Catalyst UI kiti ise yalnızca 55 ms'de build edilebiliyor.
• Yeni motorun kurulum boyutu %35'ten fazla küçültüldü ve Rust ile Lightning CSS gibi ağır native paketleri içeriyor.
• Framework'ün en maliyetli kısımları Rust ile işlenirken, çekirdek genişletilebilirlik sağlamak için TypeScript'te tutuluyor.
• Yeni motor yalnızca Lightning CSS'e bağımlı.
• Kendi CSS parser'ını yazdılar ve PostCSS'ten 2 kat daha hızlı parse sağlayan veri yapıları tasarladılar.

Birleşik toolchain

• Tailwind CSS v4 artık bir plugin değil, CSS işleyen hepsi bir arada bir araç.
• @import işleme, vendor prefix ekleme ve nesting desteği gibi özellikler yerleşik geliyor; ayrı yapılandırma gerekmiyor.
• oklch() renkleri ve media query aralıkları gibi modern CSS özelliklerini, daha iyi tarayıcı desteği sağlayan sözdizimlerine dönüştürüyor.
• PostCSS plugin'i sunmaya devam edecekler, ancak bundler plugin'lerini de araştırıyorlar; ilk alpha sürümüyle birlikte resmi bir Vite plugin'i de sağlanıyor.

Modern web için tasarlandı

• Tailwind CSS v4, önümüzdeki birkaç yıl boyunca en ileri noktada hissettirecek bir framework oluşturmayı hedefliyor.
• Geçmişte sorun olan specificity problemlerini çözmek için gerçek @layer kuralları kullanılıyor.
• @property, dahili özel özellikleri açıkça tanımlamak ve arka plan degradeleri gibi efektleri mümkün kılmak için kullanılıyor.
• color-mix, renk değişkenlerinin opaklığını veya currentColor opaklığını ayarlamayı kolaylaştırıyor.
• Container query desteği doğrudan çekirdeğe eklenmiş durumda; yeni @min-* ve @max-* varyantlarıyla container query aralıkları da destekleniyor.

Birleştirilebilir varyantlar

• Yeni mimari, farklı selector'lar üzerinde çalışan varyantların birlikte compose edilmesine imkân tanıyor.
• Önceki sürümlerde group-has-* gibi varyantlar framework içinde açıkça tanımlanıyordu; artık group-*, mevcut has-* varyantlarıyla birlikte compose edilebiliyor.

Sıfır yapılandırmalı içerik algılama

• İlk alpha sürümünde content yolu yapılandırılamıyor ve çoğu projede bunu yeniden ayarlamaya gerek olmayacak.
• PostCSS plugin'i veya CLI kullanıldığında Tailwind, şablon dosyalarını bulmak için tüm projeyi tarıyor.
• Vite plugin'i kullanıldığında ise modül grafiğine dayanarak gerçekten kullanılan dosyaları tam olarak belirleyebiliyor.

CSS öncelikli yapılandırma

• Tailwind CSS v4.0'ın temel hedeflerinden biri, framework'ün bir JavaScript kütüphanesi gibi değil CSS'in doğal bir parçası gibi hissettirmesi.
• Kurulumdan sonra projeye normal CSS @import ifadesiyle ekleniyor.
• Tüm özelleştirmeleri JavaScript yapılandırma dosyasında tanımlamak yerine CSS değişkenleri kullanılıyor.

Neler değişti

• Önemli breaking change'ler hafife alınmıyor, ancak v4'te bazı şeyler farklı ele alınıyor.
• Artık belgelenmemiş utility'ler kaldırılıyor.
• PostCSS plugin'i ve CLI ayrı paketler olarak sunuluyor.
• Varsayılan kenarlık rengi kaldırılıyor.
• Varsayılan olarak ring utility'si artık currentColor kullanan 1 px'lik bir ring.

v4.0 yol haritası

• Yeni motor sıfırdan yeniden yazıldı ve yeni yapılandırma yaklaşımını kullanan geliştirici deneyimine tamamen odaklanıyor.
• Geriye dönük uyumluluk çok önemli görülüyor ve bu, kararlı v4.0 sürümü için ana çalışma başlıklarından biri.
• Buna JavaScript yapılandırma dosyası desteği, açık içerik yolu yapılandırması, farklı dark mode destekleri, plugin ve özel utility desteği, class prefix yapılandırması, safelist ve blocklist desteği, important yapılandırma desteği, theme() fonksiyonu desteği ve bağımsız CLI desteği dâhil.

Alpha sürümünü denemek

• Zaten birkaç alpha sürümü etiketlenmiş durumda ve projelerde bugünden itibaren denemelere başlanabilir.
• Tailwind CSS IntelliSense eklentisini kullanıyorsanız, VS Code uzantı sayfasından pre-release sürüme geçmeniz gerekiyor.
• Bir sorun bulursanız bunu GitHub üzerinden bildirmeleri isteniyor.

Vite kullanmak

• Tailwind CSS v4 alpha ve yeni Vite plugin'i yüklenir.
• vite.config.ts dosyasına plugin eklenir.
• Ana CSS dosyasında Tailwind içe aktarılır.

PostCSS kullanmak

• Tailwind CSS v4 alpha ve ayrı PostCSS plugin paketi yüklenir.
• postcss.config.js dosyasına plugin eklenir.
• Ana CSS dosyasında Tailwind içe aktarılır.

CLI kullanmak

• Tailwind CSS v4 alpha ve ayrı CLI paketi yüklenir.
• Ana CSS dosyasında Tailwind içe aktarılır.
• CLI aracı kullanılarak CSS derlenir.

GN⁺ görüşü

• Tailwind CSS v4.0'ın açık kaynak olarak paylaşılması, geliştirici topluluğuna yeni özellikleri ve iyileştirmeleri erken deneyimleme fırsatı sunuyor. Bu, geliştiricilerin framework hakkında geri bildirim vermesine ve daha kararlı bir final sürüme katkıda bulunmasına imkân tanıyor.
• Yeni motorun performans artışı, özellikle büyük projelerde veya hızlı geliştirme döngülerinin önemli olduğu ortamlarda build sürelerini ciddi biçimde kısaltacak gibi görünüyor.
• Rust ve TypeScript birleşimi, performans ile genişletilebilirliği aynı anda hedefleyen modern bir yaklaşımı yansıtıyor. Rust ile yazılan kısımlar performansı en üst düzeye çıkarırken, TypeScript geliştiricilerin sistemi daha kolay genişletmesini ve bakımını yapmasını sağlıyor.
• CSS değişkenlerini kullanan yeni yapılandırma yaklaşımı, mevcut JavaScript tabanlı ayarlara göre daha CSS dostu ve design system'lerle entegrasyonu kolaylaştırabilir.
• Bu değişiklikler mevcut kullanıcılar için bir miktar migration çalışması gerektirebilir, ancak uzun vadede daha sade ve bakımı daha kolay bir kod tabanına yol açması bekleniyor.

[GN⁺]

Hacker News görüşleri

• Tailwind CSS, frontend için ikinci en iyi şey; onu yalnızca Vue 3 geçiyor.

  • CSS sınıf adları bulma zahmeti yok, tekrarlanan CSS kodu ya da çakışan sınıf sorunları da yok.
  • Tüm kod tek bir dosyada olduğundan, bileşeni sadece koda bakarak görselleştirmek mümkün.
  • SCSS'ye geri dönmem; Vue 3, TailwindCSS ve Vite kombinasyonunun en iyisi olduğunu düşünüyorum.

• Tailwind'in güçlü bir eleştirmeni olarak, CSS-first yapılandırması altındaki tüm duyuruları son derece memnuniyet verici buluyorum.

  • Tailwind'in design token'larını, reset'lerini vb. kullanabiliyor ve gerçek CSS üzerinden özelleştirme yapabiliyorsunuz.
  • CSS'in modern mimarisini, cascade'i, hatta web component'lerin shadow DOM'unu bile atmadan Tailwind'i 'hafifçe' kullanmanın yeni bir yolunu sunuyor.

• CTRL+u, söz diziminin iyi bir örneğini gösteriyor.

  • Örneğin, yuvarlatılmış köşeli bir kutu ile üst ve alt bölümler oluşturmak için sezgisel, tek satırlık bir kod gerekiyor.

• Bağımsız CLI üzerinde henüz çalışmadılar ama v4.0 sürümünden önce mutlaka tamamlayacaklar.

  • Duyurunun geri kalanını düşününce bunun Rust ile geliştirileceğini varsayıyorum.
  • Özellikle Vercel'in artık terk edilmiş pkg aracına bağımlıysa, içine Node gömülmemesini tercih ederim.

• Çok sayıda umut verici iyileştirme var.

  • JS ile genişletmek yerine CSS ile temayı kontrol edebilme özelliği beni en çok heyecanlandırıyor.

• Tailwind'in, unocss gibi attributify desteği sunmasını isterdim.

  • Karmaşık düzenlerde çok daha okunabilir oluyor.

• Frontend geliştiricisi değilim ama birkaç web sitesinin bakımını yapıyorum ve hepsi Tailwind kullanıyor.

  • Tailwind bakımcılarının öncelikleri belirleme konusunda çok iyi sezgilere sahip olduğunu ve harika bir tasarım anlayışları bulunduğunu düşünüyorum.
  • Tailwind, kullanmadan önce anlaşılmıyor ama her sürümde daha da rafine bir ürün sunuyor.
  • Bu sürümde uyumluluk açısından büyük bir değişiklik yok gibi görünüyor, ancak sürüm 4 resmileştiğinde daha fazla değişiklik olabilir.
  • Yeni motorun görünümü oldukça havalı ve build hızı artışı her zaman memnuniyet vericidir.

• Tailwind için iyi bir tutorial/guide olup olmadığını merak ediyorum.

• htmx veya başka bir hateoas yaklaşımıyla birlikte tailwindcss kullanan biri var mı diye merak ediyorum.

  • hypertext'in stillendirmeyle ilgili olmaması gerekir ama Tailwind gibi şeyler bununla çelişebilir.
  • CSS ve hateoas, markup ile stillendirme ayrıldığı için mükemmel uyum sağlıyor; ama tailwindcss gibi bir şeyde bunun nasıl yapıldığını merak ediyorum.

• Demo projede kullanmak istedim ama import from "node:@tailwindcss/postcss@latest", package.json içindeki exports alanıyla ilgili bir hata veriyor.

  • Buna rağmen blog yazısında postcss-import kullanmaya gerek olmadığı söyleniyor ama yine de bunu bağımlılık olarak eklemişler.