Tailwind CSS ile Modern UI Tasarımı

Utility-First Yaklaşıma Geçiş

CSS yazarken sınıf isimlendirme (class naming) en zorlu süreçlerden biridir. BEM metodolojisi gibi çözümler olsa da, Tailwind CSS bu sorunu kökten çözer.

Avantajlar

• Hız: Stil dosyaları arasında geçiş yapmadan HTML içinde stil verme.
• Tutarlılık: Önceden tanımlanmış renkler, boşluklar ve tipografi.
• Küçük Bundle Boyutu: Kullanılmayan CSS’ler üretim aşamasında otomatik olarak temizlenir (PurgeCSS).

Örnek Kullanım

Geleneksel CSS yerine:

.btn {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

Tailwind ile:

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Tıkla
</button>

Dark Mode Kolaylığı

Tailwind ile karanlık mod desteği eklemek sadece bir dark: öneki kadar kolaydır.

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Otomatik tema uyumu!
</div>