Tailwind CSS: 15 Bileşen Kitaplığı ve Kullanıcı Arayüzü Kitleri

Tailwind CSS, ön uç topluluğu fırtına ile ele geçirdi. Yardımcı program tabanlı CSS çerçevesi, modern web geliştirmeyi kolaylaştırmayı amaçlar. Ve son 4 yılda ne kadar popüler hale geldiği ile bu konuda başarılı olduğunu düşünüyorum.

Sadece birkaç yıl içinde Tailwind CSS, Bulma, Semantic UI, Foundation ve diğer önde gelen CSS çerçevelerini geçmeyi başardı. Bootstrap'in sağlam bir numaralı konumuyla şu anda dünyanın en popüler 2. çerçevesidir.

Peki, Tailwind CSS tam olarak nasıl çalışır? En temel açıklama Boostrap ile karşılaştırmak olacaktır. Bootstrap önceden tanımlanmış düzenlerle birlikte gelirken, Tailwind sınıf yardımcı programlarını vurgular. Bu nedenle, yerleşim öğelerinizin nasıl görüneceğinin kontrolü her zaman sizdedir.

Başka bir deyişle, Tailwind fikirsizdir ve bir tasarım yapısını zorlamaz. Çoğunlukla, belirli bir bileşeni nasıl şekillendireceğinize karar vermeniz gerekir. Ve bunun için size önceden oluşturulmuş yardımcı program sınıfları verilir. Çoğu düzeni, özel bir stil sayfasına hiçbir şey yazmadan yapabilirsiniz. Ancak bunun tasarım zenginliği ve esnekliği açısından sınırları olabilir.

Bu nedenle, eninde sonunda özel stiller yazmak zorunda kalacaksınız. Ancak Tailwind tasarımlarınızı bir sonraki seviyeye taşımanın tek yolu bu değil. Başka bir çözüm, bir bileşen kitaplığı veya bir UI kiti kullanmaktır. Ve bunlardan birkaçı Tailwind CSS için oluşturulmuş.

UI Kiti ve Bileşen Kitaplığı Karşılaştırması

Temel fark, tam ölçekli bileşen kitaplıklarının bir tasarım sistemi uygulamasıdır. Yani dinamik projelere uygun katı bir layout yapısı.

Oysa bir UI kiti genellikle özel öğelerden oluşan bir koleksiyondur. Ve bu öğeleri, web sitesi tasarımları için hızlı prototipler ve maketler sunmak için kullanabilirsiniz.

 CDN kullanmalı mısınız?

Aşağıdaki kaynakları bir stil sayfası CDN'si ile uygulamak mümkün olsa da, önerilmez. Npm veya diğer paket yöneticileri aracılığıyla kurarak, ihtiyacınız olan bileşenleri tek tek seçebilirsiniz. Ve sırayla, tüm stil sayfasını yüklemekten kaçının.

Bileşen kodunu kendiniz mi yazmanız gerekiyor?

Yani, bu kitin kendisine bağlıdır. Bu makalede bahsedilen çözümlerden bazıları önceden oluşturulmuş kod sağlamaz . Başka bir deyişle, HTML yapısını alırsınız, ancak işlevi almazsınız. Kütüphanelerden sadece birkaçı, ama kafa karışıklığına neden olmamak için bunu kesinlikle açıklığa kavuşturacağımı düşündüm.

Kitaplığım / kitim bu listede yok

Genelde mümkün olduğunca kapsamlı bir araştırma yapmaya çalışırım. Bu listede bir kitaplık veya UI kiti eksikse, benimle iletişime geçin. Bir göz atmaktan ve sonra buraya eklemekten mutluluk duyarım. Öncelikli hedefim, tüm kaynakların ücretsiz olarak kullanılabilir olmasıdır. Tek kriter bu.

Arka rüzgar kullanıcı arayüzü

İşleri Tailwind Labs'ın resmi kütüphanesiyle başlatacağız. Birkaç yüz özel bileşenle, aynı zamanda en eksiksiz kitaplıklardan biridir. Tek uyarı, tam erişim elde etmek istiyorsanız, 150 dolar civarında öksürmeniz gerekecek.

Önizleme bileşenlerine erişebilirsiniz. Her birinin içe aktarabileceğiniz bir demosu ve kodu vardır. Toplamda yaklaşık 100'den fazla ücretsiz bileşen vardır. Ürün kartları, özel açılır menüler, gezinme çubukları, form düzenleri ve daha fazlasını içerir.

Tailwind UI, React ve Vue ile uyumludur ve yerel HTML desteğine sahiptir. Yine de ham HTML kullanacaksanız – erişilebilirlik seçeneklerinizi göz önünde bulundurmalısınız.

papatya kullanıcı arabirimi

Bu, bu listeye oldukça ilginç bir ektir. Fark edeceğiniz ilk şey, daisyUI'nin bileşenleri için özel, daha basit bir sözdizimi kullanmasıdır. Aslında, bir düğmeyi ham Tailwind ile biçimlendirmek için birkaç yardımcı program yazmanız gerekirken, daisyUI bunu tek bir "btn" etiketiyle yapar.

Bu kitaplığın Tailwind CSS için bir eklenti olarak kullanılması amaçlanmıştır. Tüm bileşenler Vanilla CSS'de yazılır ve belirtilir. Bu, temel Tailwind kitaplığını kullandığınız sürece daisyUI'nin herhangi bir iş akışına entegre edilebileceği anlamına gelir.

Benim kişisel favorim daisyUI'nin temalar yönü. Tipik olarak, herhangi bir çerçeve/kütüphaneden beklediğiniz şey en azından açık ve koyu temalardır.

Pouya Saadeghi, 20'den fazla özel tema ekleyerek bunu bir adım öteye taşıdı. Ve her tema, 45 bileşenin her birinin stilini ve görünümünü ayarlar.

Mamba kullanıcı arayüzü

Mamba UI, UI iş akışını kolaylaştırmaya yardımcı olmak için tasarlanmıştır.

Hem web geliştiricileri hem de web tasarımcıları tarafından kullanılmak üzere tasarlanmıştır. Kitaplık, en sık kullanılan yerleşim öğeleri için bileşenleri içerir.

Bunun da ötesinde, her bir bileşeni ihtiyaçlarınıza göre şekillendirebilmenizi sağlamak için modüler bir yapı uygular. Mamba UI, yalnızca açılış sayfası tasarımları için değil, aynı zamanda kişisel portföyler, e-ticaret siteleri ve daha fazlası için de kullanım görür.

Bireysel bileşenler açısından Mamba UI, olağanüstü seçeneklere sahiptir. Makale kartları, yükleme çubukları, başlık bölümleri, istatistikler. Zaman çizelgeleri, haber bölümleri ve galeri görüntüleri gibi daha da karmaşık öğeler. Ve tamamen ücretsizdir.

Başsız kullanıcı arayüzü

Burada Tailwind Labs'deki insanlardan başka bir projemiz var. Bu sefer, önceden oluşturulmuş başsız UI bileşenleri için bir kitaplık. Başka bir deyişle, bunlar Tailwind düşünülerek React ve Vue için oluşturulmuş stilsiz düzen bileşenleridir.

Bileşenlerin seçimi nispeten düşük olsa da, bu kütüphanenin biraz tanınmayı hak ettiğine inanıyorum. Ve bunu genişletilmiş belgeleri sayesinde yapar. Dokümanlar, her bir bileşenin nasıl kullanılacağına ilişkin kapsamlı örnekler sağlar.

Ek olarak, bileşenlerinizi en iyi erişilebilirlik uygulamaları için nasıl yapılandıracağınıza ilişkin kılavuzlar vardır. Tek dezavantajı, tüm stilleri kendiniz yazmanız gerektiğidir.

Kuyruk Rüzgarı Elemanları

Tailwind Elements, yüzlerce UI bileşeniyle birlikte gelir. Bunun üzerine, kit ayrıca çeşitli tasarım blokları sağlar. Bu bloklar, özellikle, yeni bir yerleşim tasarımını önyüklerken zamandan tasarruf etmenize yardımcı olacak, önceden hazırlanmış yerleşim bölümleridir.

Genel izlenimim, Tailwind Elements'in oldukça minimal bir görünüm ve his için çabaladığı yönünde. Belgeler, npm ile nasıl devam edeceğinizi gösterir veya kitin pratikte nasıl çalıştığına hızlı bir şekilde bakmak için CDN'yi de kullanabilirsiniz.

Kullanıcı Arayüzü

Tailwind CSS'yi vanilya JavaScript ile birlikte kullanma fikrini seviyorsanız, Xtend UI mükemmel bir başlangıç ​​setidir. Bu kitteki bileşenler çeşitli efektlerle (animasyonlar, geçişler) güçlendirilmiştir ve modern web projeleri için idealdir.

Belgelere göz atarsanız, bileşen türlerini kategorilerine göre seçebilirsiniz. Her biri, projelerinize hemen eklemeye başlayabileceğiniz önceden hazırlanmış snippet'ler içerir. Aslında, her bileşenin hem HTML hem de React snippet'i mevcuttur.

akış ısırığı

Flowbite, tartışmasız Tailwind için en eksiksiz bileşen kitaplıklarından biridir. Hazırlanan ücretsiz kaynakların sayısı çıldırmış durumda. Kütüphane, Laravel, React ve Vue.js gibi çerçeveler için önceden oluşturulmuş desteğe sahiptir.

Bunun da ötesinde, Figma tasarım dosyalarının bir kopyasını da alabilirsiniz. Bu, tasarımcıların maketleri geliştiricilere göndermeden önce sihirlerini kullanabilmelerini sağlayacaktır.

Bileşen stilini beğendiyseniz, Pro planlarına göz atın! Bu planda, bileşenlerine tam erişimin kilidini açarsınız. Ayrıca, uygulamalar ve e-Ticaret için tüm Figma dosyalarına, Hugo temalarına ve özel UI bileşenlerine erişin.

Web Sitesi Belgeleri GitHub

Arka Rüzgar Kullanıcı Arayüzü Kiti

TUK ile ilgili göze çarpan ilk şeylerden biri, unsurların çeşitliliğidir. Kit 3 kategoriye ayrılmıştır: web uygulamaları, pazarlama ve e-Ticaret. Her kategori, belirli bir kullanım durumuna göre uyarlanmış kendi bileşen seçimlerine sahiptir.

Tam erişim elde etmek için ödeme yapan bir müşteri olmanız gerekir. Bununla birlikte, ücretsiz kullanıcılar 200'den fazla ücretsiz erişime sahip bir tur için TUK alabilir. Ve bu, düzen kaplarından, kartlardan, modlardan ve çok daha fazlasından her şeyi içerir.

Kütüphane, Angular'ın beğenileri de dahil olmak üzere tüm ana çerçeveleri destekler. Şablonları bölümüne bir göz atmanızı tavsiye ederim. Temalar kesinlikle birinci sınıf olmasına rağmen, size tasarım olanakları hakkında bir fikir veriyor.

Web Sitesi Belgeleri GitHub

Meraki kullanıcı arayüzü

İlk izlenimler her zaman önemlidir ve Meraki UI, geldikleri kadar temizdir. Bu kitaplıktaki bileşenler, duyarlı tasarım ve yerel RTL entegrasyonu için optimize edilmiştir.

Duyarlılık için Meraki, hem Grid hem de Flexbox kullanıyor. Sonuç, arayüzlerin gömme bir seçimidir. Toplamda yaklaşık 20 farklı element kategorisi vardır. Düğmeler ve kartlar gibi temel bilgilerle başlayıp, aynı zamanda çeşitli bölüm düzenleri ve fiyatlandırma modelleri de dahil.

kuyruk blokları

Tailwind CSS ile ilgili en sevdiğim şeylerden biri, tasarım parçacıklarını kolayca kopyalayıp yapıştırabilmenizdir. Sözdiziminin yeni gelenler için ne kadar “dostça” olduğu konusunda pek çok tartışma var. Ancak, yardım edemem ama çoğu zaman başka bir öğeyi hiçbir şey bozulmadan kopyalayabileceğiniz gerçeğini takdir ediyorum. Örneğin, karmaşık stil sayfalarına bağımlılık yoktur.

Ve bu aynı zamanda Tailblocks'un amacını da özetliyor. Bir web sitesi düzenini ölçeklendirmeniz için size yapı taşları sağlayan temiz bir bileşen kitaplığıdır.

Özellikle, düzen sunumunda ne kadar çeşitli olduğu için Tailblocks'u seviyorum. İçerik öğeleri gibi bir şeye bakarsanız, bunlar tam ölçekli kahraman bölümleridir. Ve en iyi yanı, onları kopyalamak için “kodu görüntüle”ye tıklamanız yeterli. Bu kadar.

Tailblocks, alternatif renk stilleri sağlamaya kadar gider. Bu da tamamen yerel Tailwind CSS stil sayfasına dayanmaktadır. Bu nedenle, sizden ek bir stil oluşturmanıza gerek yoktur.

HyperUI

HyperUI, Mark Mead tarafından Tailwind topluluğuna sağlanan açık kaynaklı bir projedir. Daha önce kütüphane ile pratik olarak aynı kavramdır. 30~ farklı bileşen kategorisi arasından seçim yapabilirsiniz. Ve her kategori, verilen bileşen için 3 ila 10 farklı stil içerir.

HyperUI hakkında sevdiğim şey özelleştirme seçenekleri.

Ana sayfaya gidip belirli bileşeni seçerseniz. Özel ihtiyaçlar için kap boyutunu daraltmak için özelleştirebilirsiniz. Daha sonra, sadece kodu görüntüleyin ve snippet size önceden hazırlanmış olarak sağlanır.

Kimia kullanıcı arayüzü

Kimia UI, özellikle React.js çerçevesi için oluşturulmuştur. Bu nedenle, her bileşenin önceden oluşturulmuş bir React modülü vardır. Ve Kimia, React'e bağlı diğer çerçevelerle de uyumludur. Örneğin Next, Gatsby, Remix ve diğerleri.

Sonuç olarak, Kimia gibi bir araç seti, Tailwind CSS'den en iyi şekilde yararlanma sürecini basitleştirir.

Arka Rüzgar Başlangıç ​​Kiti

Öyleyse, stil sayfası CDN'yi kullanmama dediğimi hatırlıyor musun? Size bir fikir vermesi açısından, bu başlangıç ​​kiti sıkıştırılmamış haldeyken 40 MB'tan daha büyüktür!

Tabii ki, asla mevcut olan her stili eklemeniz gerekmeyecek. Bu kit ve bileşenleri için gerçek stil sayfası boyutu 80 kb'dir.

Ve tüm bileşenlerin önceden oluşturulmuş işlevleri vardır. Şu anda, işlevler React, Vue ve Angular için kullanılabilir. Ve elbette, ham HTML parçacıkları da dahildir.

Malzeme Kuyruk Rüzgarı

Sonunda Material Design stil kılavuzunu benimsemeyen tek bir çerçeve düşünemiyorum. Ve Tailwind için - Creative Tim ekibine teşekkür etmemiz gerekiyor.

Malzeme Tailwind tam olarak budur. Tailwind CSS yapısına dayalı bir Materyal Tasarımı uygulaması. Şu an için kodlanmış bileşenler yalnızca React için mevcuttur. Ekip, daha fazla çerçevenin izleyeceğini belirtmiş olsa da.

Stil akışı hakkında fikir edinmek istiyorsanız, şablonlar bölümüne bir göz atın. Nihai tasarımın nasıl görüneceğini göstermek için önceden hazırlanmış bir grup site.

Konsta Kullanıcı Arayüzü

Tailwind CSS gibi çerçeveler yalnızca web tabanlı projeler için kullanışlı değildir. Tailwind CSS ile bir mobil uygulama oluşturmak istiyorsanız – Konsta UI kitaplığı göz önünde bulundurulması gereken bir kitaptır.

React, Vue ve Svelte'yi desteklemek için inşa edilmiştir. Ve iOS'un tasarım yapısına ve Materyal Tasarımının bir karışımına dayanmaktadır. Her bileşen, en temel biçimde nasıl çalıştığını gösteren önceden hazırlanmış bir kod parçacığına sahiptir.

Konsta UI'nin yazarı, bu kütüphanenin Ionic veya Framework7 ile birlikte kullanılmak için en iyi şekilde çalışacağını vurguladı. Yani bir anlamda bu kütüphaneyi hem hibrit projeler için hem de Web Native uygulamaları için kullanabilirsiniz.

ön çizgi

Preline UI, Tailwind CSS'nin üstünde yeni yayınlanan bir UI bileşen kitaplığıdır. Promosyonun bu kitaplığın pazarlama stratejisinin bir parçası olup olmadığı belli değil, ancak Twitter'da trend olduğunu gördüm ve birçok büyük yayıncı da onu aldı. Öyleyse biraz daha derine inelim.

200'den fazla özel örnek önceden tasarlandığından, göze çarpan ilk şey bileşenlerin sayısıdır. İkincisi, tasarımın kalitesi kusursuz. Yalnızca varsayılan bileşenlerle (kendi stiliniz olmadan), Preline'ı kişisel sitelerden ajans projelerine kadar herhangi bir projeye kolayca uygulayabilirsiniz.

Ayrıca özel Tema dosyalarıyla çalışma seçeneğiniz olacak, ancak aynı zamanda her iki sürümü aynı anda tasarlayabilmeniz için entegre bir Karanlık Mod yapısı da olacak.

Tasarım ve geliştirme sürecini iyileştirmek

Tailwind için önümüzdeki dört yıl nasıl olacak? v3.0'ın yakın zamanda yayınlandığını biliyoruz. Bu sürüm, diğer yeni özelliklerin yanı sıra performans ve tarayıcı entegrasyonu için iyileştirmeler getirdi. Bu sadece başlangıç ​​mı?

Bu çerçeveden öğrenebileceğimiz bir şey varsa, geliştiricilerin yeni sistemler öğrenmeye karşı olmadığıdır. Elbette, sözdiziminin gerçekten ustalaşması biraz zaman alabilir. Ancak, tamamen işlevsel bir düzen oluşturma hızı eşi benzeri görülmemiştir.