EMZETT.Tailwind CSS ve utility-first stillendirme
Kısaca: Tailwind CSS, p-4 veya text-center gibi birçok küçük yardımcı sınıf sunar; bunlarla kendi CSS sınıflarını yazmak yerine arayüzleri doğrudan HTML’de biçimlendirirsin.
Biraz daha ayrıntılı: Klasik CSS yapıyı (HTML) ve görünümü (CSS) ayırır ve sınıf adları gerektirir (“card-title”). Utility-first bunu tersine çevirir: her sınıf tek bir şey yapar ve onları birleştirirsin.
Ayrıntılı
Örnek
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
Save
</button>px-4 = yatay dolgu, bg-blue-600 = arka plan, hover: = fare üzerine gelince. .btn { … } yazmak yerine sınıfları öğeye atarsın.
Duyarlı, durumlar, karanlık mod
Önekler koşulları kontrol eder: md:flex (orta ekranlardan itibaren), lg:grid-cols-3, dark:bg-slate-900 (karanlık mod), focus:ring, disabled:opacity-50. Önce mobil ilkesi geçerlidir: öneksiz sınıflar her yerde, önekliler belirli bir genişlikten itibaren geçerli olur. Merkezî bir yapılandırma (renkler, boşluklar, yazı tipleri) tasarım sistemini tanımlar.
Avantajlar ve dezavantajlar
Avantajlar: hızlı prototipleme, adlandırma sorunu yok, ölü CSS yok (bitmiş dosyaya yalnızca kullanılan sınıflar girer, küçük dosya boyutu), tutarlı boşluklar ve renkler. Dezavantajlar: HTML’de uzun sınıf listeleri, sınıf adlarını öğrenme çabası, yapı ile stilin daha az ayrılması. Önlemler: bileşenler (React, Vue) yinelenen sınıfları paketler; @apply mümkündür ama idareli kullanılmalıdır.
Karşılaştırma ve başlangıç
Alternatifler: CSS Modules, styled-components, klasik BEM adlandırma kuralı, Bootstrap gibi çerçeveler (yapı taşları yerine hazır bileşenler) veya UnoCSS. Tailwind, Next.js, Vite ve diğer araçlarla kurulabilir; erişilebilirliğe (kontrast, odak stilleri) dikkat et, çünkü yardımcı sınıflar bunlar üzerine düşünmenin yerini tutmaz.