Tailwind nedir?Tailwind, en temel CSS kullanımlarını sıfırdan yazmanızı tekrar tekrar yazmanızı engelleyen, yazılımcıların ve tasarımcıların işini kolaylaştıran bir CSS framework’üdür.Tailwind, bir UI kiti olmadığı için Bootstrap, Foundation gibi frameworklerden farklıdır.Sitenizi oluşturmak için önceden tasarlanmış widget’lardan oluşan bir menüyle gelen bir framework arıyorsanız, Tailwind sizin projeniz için doğru framework olmayabilir fakat kendi kimliğine sahip özel bir tasarım ile uygulamanıza avantaj sağlamak istiyorsanız, Tailwind tam aradığınız şey olabilir.
Tailwind’i teorik olarak inceleyerek, hangi amaçla kullanılabileceğini, nerelerde tercih edilmesi gerektiği aktararak Tailwind CSS’i öğrenebileceğiniz en iyi temel kaynaklar listesi hazırladık. ????
Tailwind Nedir?
Adam Wathan tarafından 4 kişilik bir ekiple geliştirilen, özelleştirilebilir yapıya sahip bir CSS kütüphanesidir. Bootstrap ve Foundation’dan farklı olarak bir UI Kit değildir, içerisinde hazır bir tema ile gelmez. Tailwind’de, UI KIT yerine daha low-level tasarım abstraction’ları vardır.
Tailwind’in temel özellikleri:
Daha detaylı çalışabilmeyi sağladığından dolayı daha fazla esneklik sağlar.
Birleşen(Component) oluşturmaya çok elverişlidir.
Tüm elementleri responsive dizayna uyumludur.
Genişletilebilir ve özelleştirilebilir yapıya sahiptir.
Tailwind CSS Öğrenmek için Temel Kaynaklar
TailwindInk
Bu, marka renginizi seçtiğinizde size ücretsiz renkler sunan bir renk üreticisi web sitesidir. Renk kodlarını tailwind config js dosyanıza kolayca kopyalayarak çalışmalarınızı rahatça yapabilirsiniz.
Tailblocks
Tailblocks, Tailwind ile oluşturulmuş 60’tan fazla UI bloğu kullanıma olanak sağlar.
Componentler için tamamen duyarlı yapısı sayesinde blokların farklı cihazlarda nasıl görüneceğini görüntüleyebilirsiniz.
Web sitenizde kullandığınız renk şemasını seçmenize de izin verir.
Tailwind Starter Kit
Starter Kit, sitenizi hızlı bir şekilde başlatmanıza yardımcı olacak harika componentlere sahiptir.
Tek yapmanız gereken istediğiniz rengi değiştirmek ve seçtiğiniz birkaç bileşeni eklemek/çıkarmak. Kit içerisinde yer alan açılış sayfası, bir gösterge panosu ve profil sayfası sayesinde belgeleri takip etmek oldukça kolaydır.
Stitches
Stitches, Tailwind bileşenleri için şablon oluşturucudur. Tek yapmanız gereken web sitenizde kullanmak istediğiniz farklı UI bloklarını sürükleyip bırakmaktır, Stitches sizin için kodu oluşturacaktır. Kullanımı kolay ve sadedir.
Tailwind Components
Tailwind CSS kullanan topluluk bileşenleri için ücretsiz bir havuzdur.
404 sayfası, bildirim açılır menüsü, e-Ticaret ürün listesi sayfası ve daha pek çok bileşen içerir.
Bileşenlerin farklı ekran boyutlarında veya kesme noktalarında nasıl görüneceğini de görüntüleme imkanı sağlar.
Tailwind Typography Playgroung
Kodlamadan önce tipografinizin nasıl görüneceğini kontrol edebileceğiniz harika bir web sitesidir. Beğeninize uyup uymadıklarını görmek için başlıklarınızın ve metin gövdesinin yazı tipi ailesini seçebilirsiniz. Çok emin değilseniz, kolayca farklı bir yazı tipi ailesi seçebilirsiniz. Kullanılan tüm yazı tipleri Google Yazı Tipi web sitesinde ücretsiz olarak mevcuttur.
Tailwind Weekly
Tailwind Weekly, Tailwind CSS ile ilgili güncel gelişmeleri takip edeceğiniz haftalık bültenler yayınlar.
Tailwind Gradient Generator
Gradyan yapısını seviyorsanız, bu web sitesini sizin için oldukça faydalı olacaktır.
Kullanmak istediğiniz farklı renkleri (en fazla 3 renk) seçebilir, gradyanın gitmesini istediğiniz yönü belirleyebilirsiniz. Bundan sonraki aşamada, kod sizin için oluşturulur ve editörünüzde kodunuza kopyalayabilirsiniz.
Tailwind run
Bu, hareket halindeyken Tailwind UI blokları oluşturmak için canlı bir kod düzenleyici benzeri bir yapıya sahiptir.
Codepen yapısına oldukça benzerdir. Öğelerinizi ve yardımcı program sınıflarınızı ekleyebileceğiniz HTML dosyasına ve istediğiniz özel stilleri eklemek için yapılandırma dosyasını kolayca yönetebilirsiniz.
Bilgisayarınızda kurulmuş düzenleyicinizi açmadan Tailwind’i kullanmak istiyorsanız, bu web sitesi tam size göre.
Awesome Tailwind CSS
Awesome, Tailwind öğrenirken ve projeler geliştirirken faydalanabileceğiniz harika bir Github deposudur.
Farklı web siteleri geliştirirken bu kadar uğraşmamanıza yardımcı olacak 90+ harika kaynaklar içerir.
IDE Uzantıları
Eklentiler
Projelerinizi başlatmanıza yardımcı olacak araçlar
Projelerinizi başlatmak için UI bileşenleri ve şablonları
Başlangıçlar ve temalar
Tailwind ile katkıda bulanabileceğiniz açık kaynak projeleri
Tailwind öğrenme kaynakları
