Tailwind CSS Nedir?
Tailwind CSS, Tailwind Labs tarafından geliştirilen açık kaynak bir CSS framework'üdür ve “utility-first”, yani yardımcı sınıf odaklı bir yaklaşım izler. Her öğeye ad verip ayrı bir stil dosyası yazmak yerine, her biri tek bir iş yapan flex, pt-4 ya da text-center gibi küçük sınıflar doğrudan HTML'de birleştirilir. Hazır bileşenlerle gelmez; varsayılan renk ve ölçüleri bir markanın kendi değerleriyle değiştirilebilir.
Tasarım sistemi tek bir yerde durur. Renkler, boşluklar, yazı boyutları ve kırılım noktaları tema değişkenleri olarak tanımlanır ve standart CSS değişkenlerine de dönüşür. Ön ekler her sınıfı bir duruma uyarlar: geniş ekranlar için md:, fare için hover:, karanlık mod için dark:, sağdan sola metin için rtl:. Site derlenirken Tailwind kodu tarar ve yalnızca gerçekten kullanılan sınıfların CSS'sini üretir.
Tailwind CSS, MIT lisansıyla ücretsizdir. Ocak 2025'te yayımlanan 4.0 sürümü ayarları doğrudan CSS dosyasına taşıdı ve katmanlar (cascade layers) gibi modern CSS özellikleri üzerine kurulu, daha hızlı bir motor getirdi. Düz HTML'le olduğu kadar React, Vue, Next.js ve Astro projeleriyle de çalışır.
Tailwind CSS'yi Nerede Kullanıyoruz?
Tailwind, bir tasarımı ayrıntı kaybetmeden Figma'dan koda taşıma yolumuz. Özellikle şu işlerde kullanıyoruz:
Figma'dan Koda
Tasarım sisteminde kararlaştırılan renkler, yazı ölçeği, boşluklar ve köşe yuvarlaklıkları Tailwind tema değişkenlerine dönüşür; kodlanan site, tasarımdaki değerlerin aynısını kullanır.
Duyarlı Yerleşimler
Her bileşen önce telefon için yazılır, kırılım noktası ön ekleri onu tablet ve geniş ekranlara uyarlar. Bir öğenin her boyutta nasıl davrandığı tek bir yerde okunur.
Sağdan Sola Arapça Sayfalar
ms- ve pe- gibi mantıksal sınıflar boşlukları sola ve sağa göre değil, okuma yönüne göre belirler; böylece Arapça sürüm doğru biçimde aynalanır. Kalan ayrıntıları rtl: ön eki halleder.
Yeniden Kullanılan Bileşenler
Butonlar, kartlar, formlar ve menüler Tailwind sınıflarıyla React, Vue ya da Astro bileşeni olarak bir kez kurulur. Her yeni sayfa onları kullanır ve site baştan sona tutarlı kalır.
Neden Tailwind CSS?
Tutarlılık Yapının İçinde
Her boşluk, renk ve yazı boyutu ortak ölçekten gelir; bir tasarımı zamanla aşındıran rastgele değerlere yer kalmaz.
Hafif CSS
Son dosyaya yalnızca sitenin kullandığı sınıflar girer. Eski sayfalardan kalan stiller birikmez; site büyüse de stil dosyası küçük kalır.
Güvenle Değiştirilebilir
Stiller ait oldukları bileşenin yanında durur. Bir kartı değiştirmek başka bir sayfayı beklenmedik biçimde bozmaz; yayından sonraki güncellemeler daha hızlı ve güvenli olur.
Projenizde Nasıl İlerliyoruz?
İş, tasarım sisteminin tanımlandığı Figma'da başlıyor. Değerlerini Tailwind'in tema değişkenlerine aktarıyor, önce temel bileşenleri kuruyor, sonra sayfaları bu bileşenlerden oluşturuyor ve her birini farklı ekran genişliklerinde tasarımla karşılaştırıyoruz.
Teslimden önce kodlanan sayfaları Figma ekranlarıyla karşılaştırıyor; Arapça sağdan sola yerleşimi ve tasarımda varsa karanlık modu kontrol ediyor, son CSS dosyasının yalnızca sitenin kullandığı stilleri içerdiğinden emin oluyoruz. Ardından sayfaları Lighthouse ile ölçüyoruz.
