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

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, 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. 

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, 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 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. 

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 CSS ile ilgili güncel gelişmeleri takip edeceğiniz haftalık bültenler yayınlar.

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.

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 öğ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ı