Tailwind CSS Nedir?
Yayın: · Son güncelleme:
Tailwind CSS Nedir? Kısaca
Tailwind CSS, hazır bileşenler yerine her biri tek bir stil kuralı uygulayan küçük yardımcı sınıflar sunan, "utility-first" yaklaşımlı açık kaynaklı bir CSS çatısıdır. Tasarım doğrudan HTML içinde sınıflarla kurulur.
Tailwind CSS nedir?
Tailwind CSS, sayfaları ayrı bir CSS dosyası yazmadan, HTML öğelerine küçük sınıflar ekleyerek biçimlendirmeyi sağlayan bir CSS çatısıdır. Her sınıf tek bir iş yapar. Örneğin p-4 iç boşluk verir, text-center metni ortalar, bg-blue-500 arka planı maviye boyar.
Bu yaklaşıma "utility-first", yani önce yardımcı sınıflar denir. Bootstrap gibi hazır düğme ya da kart bileşenleri sunmaz. Bunun yerine her bileşeni bu küçük parçalarla siz kurarsınız.
Nasıl çalışır?
Bir ürün kartı için class="rounded-lg shadow p-6 md:flex" yazdığınızı düşünün. Köşeler yuvarlanır, gölge eklenir, iç boşluk verilir ve orta boy ekranlarda öğeler yan yana dizilir. md: gibi önekler, kuralın yalnızca belirli ekran genişliğinde geçerli olmasını sağlar.
Tailwind derleme sırasında projedeki dosyaları tarar ve yalnız kullanılan sınıfları son CSS dosyasına koyar. Böylece binlerce olası sınıfa rağmen yayına çıkan dosya küçük kalır. Renkler, boşluk ölçüleri ve yazı tipleri bir yapılandırma dosyasından topluca değiştirilebilir.
Artıları ve eksileri
En büyük artısı hızdır. CSS dosyası ile HTML arasında gidip gelmeden, tutarlı bir ölçü sistemiyle çalışırsınız. Sınıf adı bulma derdi de ortadan kalkar.
Eksi tarafta, HTML satırları uzun ve kalabalık görünebilir. Tekrar eden yapılar için bileşen ya da şablon kullanmak bu sorunu azaltır. Önce temel CSS kavramlarını, özellikle flexbox ve grid mantığını bilmek, Tailwind sınıflarının ne yaptığını anlamayı kolaylaştırır.
Sıkça Sorulan Sorular
Tailwind CSS öğrenmek için CSS bilmek gerekir mi?
Evet, temel CSS bilgisi gerekir. Tailwind sınıflarının çoğu tek bir CSS özelliğine karşılık geldiği için o özelliğin ne yaptığını bilmeden doğru sınıfı seçmek zordur.
Tailwind sayfayı yavaşlatır mı?
Genellikle hayır. Derleme sırasında kullanılmayan sınıflar ayıklandığı için yayına çıkan CSS dosyası çoğu projede oldukça küçüktür.