Tailwind CSS

Okunuşu: teylvind si es es

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Tailwind CSS, utility-first bir CSS framework'üdür: özel stil dosyaları yerine öğeleri doğrudan HTML'de küçük, tek amaçlı sınıflarla biçimlendirirsiniz.

Tailwind CSS nedir?

Tailwind CSS, Adam Wathan tarafından geliştirildi ve ilk olarak 2017'de yayımlandı. Geleneksel CSS, .card-header gibi sınıf adları uydurup stillerini ayrı bir dosyaya yazmak demektir. Tailwind bunu tersine çevirir: her biri tek bir iş yapan binlerce küçük sınıf sunar, örneğin iç boşluk için p-4, arka plan rengi için bg-blue-600 ya da yuvarlak köşeler için rounded-lg; siz de bunları öğenin üzerinde birleştirirsiniz.

Ön ekler, HTML'den çıkmadan koşullar ekler: md:flex yalnızca orta boy ve üzeri ekranlarda, hover:bg-blue-700 yalnızca üzerine gelindiğinde, dark:text-white de yalnızca koyu modda uygulanır. Değerler boşluklar, renkler ve yazı boyutlarından oluşan bir tasarım ölçeğinden gelir; bu da bir siteyi tutarlı tutar ve bu ölçeği kendi markanız için özelleştirebilirsiniz.

Tailwind, dosyalarınızda gerçekten kullandığınız sınıfları tarar ve yalnızca o CSS'i üretir; böylece son stil dosyası küçük kalır. 2025'te yayımlanan 4. sürüm, yapılandırmayı CSS'in içine taşıdı ve çok daha hızlı derlemeler için motoru baştan yazdı. React, Vue ve düz HTML dahil her framework ile çalışır.

Sık yapılan bir yanlış, Tailwind'in satır içi stillerle (inline style) aynı şey olduğu düşüncesidir. Sınıfları duyarlı (responsive) kırılma noktalarını, hover ve focus durumlarını, koyu modu ve ortak bir tasarım ölçeğini destekler; satır içi stiller bunların hiçbirini yapamaz. Uzun sınıf listeleri okunması zor olabilir; ekipler bunu genellikle tekrar eden parçaları bileşenlere ayırarak çözer.

Önemli noktalar

Tailwind CSS, öğeleri küçük ve tek amaçlı utility sınıflarıyla biçimlendirir.
md:, hover: ve dark: gibi ön ekler stilleri koşullu uygular.
Ortak bir tasarım ölçeği boşlukları, renkleri ve boyutları tutarlı tutar.
Son CSS'te yalnızca kullandığınız sınıflar yer alır.
Tekrar eden sınıf listeleri genellikle bileşenlere ayrılır.

Örnek

Utility sınıflarıyla biçimlendirilmiş duyarlı bir karthtml

<div class="max-w-sm rounded-lg bg-white p-6 shadow md:flex md:max-w-xl dark:bg-zinc-900">
  <img class="h-16 w-16 rounded-full" src="/ada.jpg" alt="" />
  <div class="mt-4 md:mt-0 md:ml-6">
    <h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Ada Lovelace</h2>
    <p class="text-zinc-600 dark:text-zinc-400">Mathematician and writer</p>
    <button class="mt-3 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Follow</button>
  </div>
</div>

Sık sorulan sorular

Tailwind CSS, düz CSS'ten daha mı iyi?

Onun yerini alan değil, CSS yazmanın farklı bir yoludur. Tailwind biçimlendirmeyi hızlandırır ve tasarımları tutarlı tutar; düz CSS ise tam kontrol verir ve ekstra bir derleme adımı gerektirmez. Birçok proje ikisini karıştırır.

Tailwind web sitelerini yavaşlatır mı?

Hayır. Tailwind yalnızca kullandığınız sınıfları ürettiği için son stil dosyası genellikle küçüktür; çoğu zaman aynı site için elle yazılmış CSS'ten bile küçüktür.

Tailwind ile Bootstrap arasındaki fark nedir?

Bootstrap, tanıdık bir görünümü olan düğmeler ve gezinme çubukları gibi hazır bileşenler sunar. Tailwind ise düşük seviyeli utility'ler sunar; kendi tasarımınızı onlardan kurarsınız.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin