Tailwind Plus’a Vanilla JavaScript desteği eklendi

• Tailwind Plus’ın UI blokları artık yalnızca Vanilla JavaScript ile tamamen çalışabiliyor
• React, Vue gibi framework’ler olmadan da etkileşimli bileşenler kullanılabiliyor
• @tailwindplus/elements adlı özel element tabanlı kütüphane yeni olarak sunuluyor
• Farklı platformlar ve framework’lerle uyumluluğa sahip kullanım kolaylığı vurgulanıyor
• Tüm Tailwind Plus müşterileri bu özelliği hemen kullanabiliyor

---

Tailwind Plus’ta Vanilla JavaScript desteği

Tailwind Plus’ın birçok UI bloğu (ör. dialog, dropdown, command palette) pratikte kullanılabilmek için JavaScript gerektiriyordu. Daha önce React veya Vue kullanmayanlar, bu UI bloklarının etkileşimlerini sağlamak için JavaScript’i kendileri yazmak zorundaydı.

Ancak artık tüm UI blokları tam işlevsellik, erişilebilirlik ve etkileşimli öğelerle birlikte geliyor ve sade HTML örneklerinde bile anında çalışıyor. Yani JavaScript framework’lerine bağımlı olmadan dropdown, command palette, dialog, drawer gibi çeşitli arayüz blokları projede her yerde kullanılabiliyor.

@tailwindplus/elements: temel kütüphane

Bu değişimi mümkün kılan şey @tailwindplus/elements kütüphanesi. Bu kütüphane, Tailwind Plus müşterilerine özel bir paket ve headless custom element koleksiyonu.

• Custom element’ler, HTML koduna yalnızca tek bir <script> etiketi eklenerek her yerde uygulanabiliyor
• Karmaşık etkileşimler, odak yönetimi, klavye erişilebilirliği ve ARIA özellikleri otomatik olarak işleniyor
• Stil verme işlemi, Tailwind CSS utility class’ları veya doğrudan yazılan CSS ile serbestçe özelleştirilebiliyor

Başlıca kullanım örnekleri

• Dropdown: <el-dropdown>, <el-menu> gibi custom element’lerle kuruluyor ve ek JavaScript olmadan çalışıyor
• Select: <el-select>, <el-options>, <el-option> element’leriyle gelişmiş seçim bileşenleri oluşturulabiliyor
• Command palette: <el-command-palette>, <el-command-list> gibi yapılarla tam işlev sunuluyor

Bu custom element’ler, ARIA özelliklerini, odak geçişlerini ve klavye navigasyonunu otomatik olarak yöneterek web erişilebilirliğini de güçlü biçimde destekliyor.

Framework entegrasyonu ve minimum platform bağımlılığı

• Yalnızca HTML kullanılan ortamların yanı sıra Svelte, Rails (Ruby on Rails), React gibi farklı ortamlara da entegre edilebiliyor
• Svelte örneği: <el-autocomplete> için çift yönlü binding ekleme örneği sunuluyor
• Rails örneği: form gönderiminde <el-select> değeri, native form kontrolü gibi sunucuya iletiliyor
• React örneği: mevcut Headless UI veya React Aria’dan farklı olarak framework bağımlılığı olmadan kullanılabiliyor

Modern web standartları ve tarayıcı uyumluluğu

• Elements, hafif yapı ve native deneyim sunmak için modern web platformu özelliklerini (Web Components, Custom Elements vb.) aktif biçimde kullanıyor
• Gerekli olduğunda polyfill’leri de otomatik olarak bundle ederek Tailwind CSS v4 ile aynı tarayıcı destek kapsamını sağlıyor
• Web standartları daha da yaygınlaştıkça Elements’in boyutunun da doğal olarak küçülmesi bekleniyor

Gerçek anlamda evrensellik: "HTML ortak paydadır"

HTML, tüm web framework’lerinin "ortak paydası" olduğundan, Elements kullanıldığında Tailwind Plus’ın HTML tabanlı UI blokları her ortamda tutarlı şekilde çalışıyor

• Svelte, Rails, React vb. için gerçek kullanım örnekleri ve kodlar sunuluyor

Yayın ve erişim bilgisi

• Tailwind Plus aboneleri güncellenmiş tüm UI bloklarına ve Elements’e hemen erişebiliyor
• Dropdown, command palette gibi farklı UI kategorileri için demo örnekleri ve Elements resmi dokümantasyonu sunuluyor
• Proje gereksinimlerine göre istenen şekilde özelleştirilebiliyor

Kapanış

Artık Tailwind Plus kullanıcıları, istedikleri her ortamda karmaşık JavaScript yazmadan güçlü ve erişilebilir UI’lar kolayca oluşturabiliyor.

[GN⁺]

Hacker News görüşleri

• `` gibi uzun ve hiyerarşik Tailwind class adlandırmalarını görünce, artık sadece CSS değil, başka bir katmanlı yapı sistemini de öğrenmek gerektiği hissine kapılıyorum

  • Büyük bir Tailwind projesi her açtığımda, tek satırda inanılmaz uzun class attribute listeleri görmek beni hep şaşırtıyor

    
    ...
    
    

  • Tailwind öncesinde karşılaştığım hemen her web tasarımcısı buna benzer bir sistemi kendi tarzında kuruyordu CSS teoride yeterince güçlü; Tailwind olmadan da pekâlâ yapılabilir Ama pratikte CSS'in büyük bir zayıflığı var: tam gücünü kullanabilmek için ayrıca semantik bir model tasarlamak gerekiyor ve tasarımcılar çoğu zaman belge yapısı ya da bilgi mimarisinden çok atmosfer ve duyguyu aktarmaya odaklanıyor Bu tür duygusal kavramları mantıksal kurallarla markup'a dökmek çok zor, hatta imkânsız olabiliyor Tailwind aslında herkesin zaten yaptığı şeyi, yani “anlam” için soyut modelleme yapmak yerine bold, red gibi doğrudan uygulanabilir kuralları resmileştirmekten ibaret

  • Böyle bir koda bakıp da “vay, ne kadar temiz bir kod!” diyebilen insanlar nasıl ortaya çıkıyor diye merak ediyorum Tailwind'in nasıl bu kadar popüler olduğunu anlamıyorum ve düz CSS öğrenmenin gerçekten daha iyi olduğunu düşünüyorum Günümüz CSS'i artık gerçekten çok daha iyi

  • Gerçek projelerde class'ları okunabilir olması için gruplayarak yazıyoruz Mesela,

    bu şekilde kodluyoruz Şu an elle sınıflandırıyorum ama bu formatı otomatikleştiren bir araç olsa güzel olurdu

  • Tailwind başlangıçta utility class tarzı bir CSS framework'ü, yani bir nevi “Bourbon on Steroids” yaklaşımı gibi görünüyordu Ama insanlar örnek kodları beklenenden çok daha istekli benimsedi ve doğrudan üst üste ekleyerek kullanmaya başladı 2018'de yeni ve büyük bir projede Tailwind denemiştim; eskiden .button, .button-primary gibi sınıfları Tailwind utility'leri üzerine inşa etmek daha bakımı kolay ve HTML'i daha temiz bir yaklaşım gibi geliyordu Ama ekip bunu gerçekten kullanınca, varsayılan utility class'ları doğrudan biriktirmenin çok daha hızlı ve kolay olduğu ortaya çıktı Kodun zarafetine fazla takılmazsanız, tasarım da tutarlı oluyor ve Photoshop'ta görülen şeyi birebir uygulamak mümkün hale geliyor Bourbon referansı

• Bu yaklaşım, web standartlarına dayalı Web Components kullanıyor Tarayıcıda yerleşik destek olduğu için JS framework'ü olmadan da çalışıyor Geliştiricilerin Web Components'i daha çok kullanmaya başlaması sevindirici Web Components nedir? (MDN)

  • Bu uzun zamandır beklediğim bir değişimdi Eskiden uyumluluğu pek dert etmediğim zamanlarda kişisel projelerde Web Components ile oynuyordum; şimdi ana akım kütüphanelerin de bunu benimsemesi gerçekten sevindirici

  • 12 yıldır Web Components'in gerekliliğini anlatıyorum ama React, Angular, Svelte gibi framework çevrelerinden pek ilgi gelmedi Web components, kapsamlı JS/TS ve bir bundler'la — muhtemelen vite veya rollup — yeterince iyi; Shadow DOM ya da tam yeniden render gibi gereksiz ek yüklere ihtiyaç yok

  • 2014 civarında Polymer ile uğraşırken “transclusion” terimi aklımda kalmıştı O zamanlar ilginç gelmişti ama şimdi tam olarak ne anlama geldiğini bile hatırlamıyorum

  • Şirketin reklam kodu için kullanılan hook'larda Web Components denedim ama şahsen biraz hayal kırıklığı yarattı Kodu tetiklemek kolay ama API'nin kendisi çok da iyi değil

• Popüler UI component dünyasına bakınca, neden temel yapının baştan beri tamamen ‘headless’ olmadığını merak ediyordum Web Components uzun zamandır vardı ama bu yaklaşımın yaygın olmaması tuhaf geliyordu Framework'e özel kütüphaneler (SHADCN vb.) sürüm uyumluluğuna göre ayrı ayrı dokümantasyon hazırlıyor ve belli ortamlara bağlandıkları için gerçekte de yeterince olgun değiller Headless UI taban alınsa ve gerekiyorsa framework'e özel wrapper'lar yazılsa daha iyi olur gibi geliyor Elbette işin daha karmaşık birçok yönü var ama insan böyle bir dünya hayal ediyor

  • React, Vue, Svelte gibi popüler framework'lerde Web Components bundle boyutu ve runtime yükü açısından ek bir overhead sadece Özellikle React'te, yaklaşım farkı yüzünden ya işlevsellikten ya da kullanım kolaylığından ödün vermek gerekiyor; aksi halde ince işlenmiş binding'ler yazmak gerekiyor ve o noktada zaten Web Components kullanmanın anlamı kalmıyor SSR gibi ileri özelliklerde de sık sık sorun çıkıyor React'in baskın olduğu bir dünyada özellikle Web Components kullanmak istemem Ayrıca headless yaklaşımın gerçek uygulaması da çoğu zaman karmaşık ya da maliyetli oluyor

• Birinin Tailwind ekibine yeterince büyük bir finansman sağlaması halinde, para kaygısı olmadan tüm Tailwind ekosisteminin ücretsiz sunulduğu çok daha iyi bir dünya hayal ediyorum Tailwind Plus gibi alanlarda derin entegrasyon fırsatlarının kaçırılması üzücü Bu bana, eski 37signals'ın Jeff Bezos'tan yatırım alıp VC baskısından kurtulmasını hatırlatıyor

  • Tailwind ekibi zaten hayal edilenden çok daha başarılı bir noktada Daha fazlasını üretmek ve büyümek istemeleri para zorunluluğundan değil, doğal bir hırstan kaynaklanıyor Benim izlenimim, Tailwind'in açık kaynak tarafı toplam işin yalnızca bir bölümü ve gelir getiren başka projeler de oluşturmak istiyorlar Laravel ile de kıyaslanabilir

  • Dürüst olmak gerekirse artık yapay zeka ile Tailwind component'leri kolayca üretilebildiği için Tailwind Plus gibi ücretli component'leri satın alma isteğim azaldı Eski Tailwind UI döneminde gerçekten para verip almıştım ama bugünlerde Claude gibi bir yapay zekadan doğrudan UI üretmesini istemek daha rahat geliyor; lisans tarafını da düşünmek gerekmiyor Bundan sonra hangi iş modelinin işleyeceğini merak ediyorum

  • 37signals konusunda ise, şahsen kurucuların birilerine hesap vererek çalışmasının belki de daha iyi olabileceğini düşünüyorum

  • Aslında “Tailwind'in tüm deneyimi” zaten ücretsiz sunuluyor Eksik olduğu söylenen derin entegrasyonların ne olduğu konusunda emin değilim Tailwind Plus (ticari ürün) sadece hazır şablonlar ve önceden oluşturulmuş component setlerinden oluşuyor Hızlı başlamak isteyen geliştiriciler için kullanışlı ama sonuçta Tailwind varsa bunların hepsi elde de yapılabilir

  • Tam olarak hangi entegrasyonların kastedildiğini merak ediyorum

• Bence şimdiden fazla heyecanlanmamak lazım Eskiden Vue desteği de vardı ama şimdi fiilen terk edilmiş gibi görünüyor

  • Bu zaten Vue desteği O kadar çok framework var ki hepsi için ayrı özel wrapper yapmak neredeyse imkânsız Web Components ile bir kez geliştirip her yerde çalıştırabilirsiniz; sonuçta framework'lerin Web Components desteğinin iyi olması, yani neredeyse HTML desteğinin iyi olması yeterli

  • Vue'nun Web Components desteği oldukça iyi ve React 19 da nihayet düzgün destek vermeye başladı Web Components ekosistemi dağınık olsa da, “tüm framework'lerde yeniden kullanılabilen component'ler” sunmanın gerçek killer app'i bu Bunu “vanilla JavaScript için” diye değil de “artık tüm framework'ler destekleniyor” diye pazarlamamaları şaşırtıcı

  • Eskiden bir Figma tasarım kütüphanesi de işletiyorlardı ama o da artık yok Tasarımcılarla işbirliği açısından üzücü bir örnek

  • Zaten adı üstünde tailwindcss'i hedefliyor

• Custom element'lerin bu şekilde kullanılması ilgimi çekti ama Tailwind tarafında bunun ücretli bir özellik olması biraz garip İçgüdüsel olarak custom element'lerin ücretsiz, framework entegrasyonlarının ise ücretli olmasını daha doğal beklerdim Tailwind Plus fiyatlandırması

  • Bu kütüphaneyi geliştirmek için yaklaşık $250,000 harcadılar; bu yüzden ücretli Bunu ücretsiz sunup sürdürülebilir şekilde bakım yapmak muhtemelen mümkün olmazdı ve iyi mühendislerin emeklerinin karşılığını alması gerekir

  • Tailwind Plus, UI component'leri ve template'lerden oluşan ücretli bir koleksiyon TailwindCSS'nin kendisi ise Bootstrap gibi yalnızca bir stil aracı

  • Bir başka ücretli özellik örneği olarak SSO da meşhur Neden ücretli olduğu ilk bakışta sezgisel gelmiyor ama amaç, benimsenmesine dair kararın özellikle ertelenmesi gibi görünüyor

  • Böyle şeylerin ücretli satılması biraz tuhaf Web geliştirme dünyasında ücretsiz olanın varsayılan sayıldığı düşünülürse, bir framework'ü ömür boyu kullanmak için abonelik ödemeniz gerekmesi garip gelebilir Sanki Postgres aylık ücret istiyormuş gibi Ama fiyatlandırmaya bakınca bunun aslında tek seferlik, ömür boyu lisans olduğu görülüyor Bu yaklaşımın ne kadar işe yarayacağını merak ediyorum

• Alpine.js sanki tailwindcss plus'ın custom block elements kısmından kaldırılmış gibi Kod örneklerinde artık alpinejs görünmemesi hayal kırıklığı yarattı Şimdi onun yerini

  bunun gibi bir kullanım almış Alpine kullanan biri olarak kopyala-yapıştır örnekleri artık doğrudan kullanamamak üzücü

• Bu özelliğin tailwind'in ücretsiz kullanıcılarına da mutlaka açılması güzel olurdu Oldukça ilginç ve denemek istiyorum ama ücretsiz tarafta buna dokunma imkânı bile olmaması üzücü Yine de açık kaynağa finansman bulmanın her zaman zor olduğunu bildiğim için tailwind'e teşekkür ediyorum Bir gün ben de açık kaynağa bağış yapan ve katkı sunan biri olmak istiyorum

• `` gibi Elements üzerinde gelişmiş bir komut paleti yapılabildiği söyleniyor ama bunun mümkün olmasının nedeni, o özelliğin doğrudan bu component içinde uygulanmış olması

• Son dönemde Tailwind'i daha fazla kullandıkça, sunduğu kolaylığı ve tasarım sistemi kurmanın zahmetini soyutlama gücünü kabul etmeye başladım Ama uzun vadede bakınca, kendi tasarım sisteminize ve component kütüphanenize yatırım yapmak; DX, esneklik, estetik dil ve bağımlılık yönetimi açısından çok daha tatmin edici bir çözüm oluyor