Tailwind CSS

Temel Özellikler

🔧

Utility-First

Utility sınıfları kullanarak tasarımlarınızı doğrudan HTML üzerinden şekillendirebilirsiniz.

⚡

JIT Compiler

Just-in-Time derleyici ile yalnızca kullandığınız sınıflar derlenir, gereksiz CSS sıfırlanır.

📱

Responsive Design

Mobil öncelikli yapı ve sm:, md:, lg: gibi prefixler ile duyarlı tasarımlar çok daha kolaydır.

🌙

Dark Mode

Dahili "dark:" prefix desteğiyle projelerinize anında karanlık mod ekleyebilirsiniz.

⚙️

Customizable

tailwind.config.js dosyasıyla renkler, fontlar ve tüm tema özelliklerini özelleştirebilirsiniz.

📦

Component Extraction

@apply direktifini kullanarak sık tekrarlanan utility sınıflarını birleştirip bileşenler oluşturabilirsiniz.

Avantajlar ve Dezavantajlar

👍 Avantajlar

Hızlı geliştirme imkanı sunar
Sınıf isimlendirme karmaşasını ortadan kaldırır
JIT sayesinde üretim CSS boyutu çok küçüktür
Yüksek düzeyde özelleştirilebilir
Harika bir duyarlı tasarım sistemine sahiptir
Mükemmel ve detaylı dokümantasyona sahiptir

👎 Dezavantajlar

Karmaşık bileşenlerde çok uzun HTML sınıflarına neden olur
Utility isimlerini öğrenmek zaman alabilir
HTML kodunun okunabilirliğini azaltabilir
Üretim ortamı için derleme (build) adımı gerektirir
Diğer CSS kütüphaneleriyle çakışma ihtimali olabilir

Canlı Demolar

1. Utility Sınıfları Gösterimi

Tailwind utility sınıflarının anlık olarak nasıl çalıştığını gösteren interaktif demo.

Kutu

<!-- Sadece HTML sınıfları ile tasarım -->
<div class="w-48 h-48 bg-blue-500 rounded-xl shadow-lg flex items-center justify-center text-white font-bold transition-all duration-300">
  Kutu
</div>

2. Responsive Kart Düzeni

Ekran boyutuna göre otomatik ayarlanan (sm, md, lg) duyarlı grid sistemi.

Yeni

Tailwind v3

JIT derleyici ile birlikte çok daha hızlı ve performanslı css kütüphanesi deneyimi.

Popüler

Responsive

Farklı ekran boyutlarına uyum sağlamak artık utility classlar sayesinde çok kolay.

Gelişmiş

Dark Mode

Projenize karanlık mod eklemek için dark: prefixini kullanmanız yeterlidir.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Card -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
    <div class="h-40 bg-indigo-500"></div>
    <div class="p-4">
      <span class="inline-block px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-semibold rounded-full mb-2">Yeni</span>
      <h4 class="text-lg font-bold text-gray-800 mb-2">Başlık</h4>
      <p class="text-gray-600 text-sm mb-4">İçerik açıklaması burada yer alır...</p>
      <button class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded font-medium transition-colors">İncele</button>
    </div>
  </div>
</div>

3. Dark Mode (Karanlık Mod) Desteği

Aşağıdaki bileşenin rengini değiştirmek için Dark Mode'u açıp kapatın (dark: sınıfını kullanır).

Ahmet Yılmaz

Yazılım Mühendisi

Tailwind CSS'in dahili dark: prefix'i sayesinde aydınlık ve karanlık tasarımları aynı HTML üzerinde tanımlayabilirsiniz.

<!-- 'dark' sınıfı üst elemana eklendiğinde devreye girer -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg">
  <h4 class="text-xl font-bold text-slate-900 dark:text-white">Ahmet Yılmaz</h4>
  <p class="text-slate-500 dark:text-slate-400">Yazılım Mühendisi</p>
  <p class="mt-4 text-slate-600 dark:text-slate-300">
    Açıklama metni...
  </p>
</div>

4. Tailwind vs Traditional CSS

Geleneksel BEM yapısı ile Tailwind Utility yapısının yan yana karşılaştırması (her iki buton da Tailwind classlarıyla simüle edilmiştir).

Geleneksel CSS (BEM)

                <button class="btn btn--primary">
              

                <button class="px-6 py-2.5 bg-blue-600 text-white rounded-md shadow font-medium">
              

<!-- Geleneksel Yöntem -->
<button class="btn btn--primary">Kaydet</button>
<!-- Ayrı bir CSS dosyasında özellikler yazılır... -->

<!-- Tailwind Yöntemi (CSS yazmadan) -->
<button class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md shadow transition-colors font-medium">
  Kaydet
</button>

Kullanım Senaryoları

🌐

Modern Web Uygulamaları

Hızlı iterasyon yapılması gereken, karmaşık arayüzlere sahip web ve SaaS projelerinde biçilmiş kaftandır.

🎨

Tasarım Sistemleri

Şirket içi özel tasarım sistemlerini ve UI bileşen kütüphanelerini inşa etmek için standartlaştırılmış bir temel sunar.

🚀

Pazarlama Siteleri (Landing Page)

Özelleştirilebilirliği sayesinde farklı markalara ve tasarımlara anında uyum sağlayarak hızlı üretim olanağı verir.