Tailwind CSS: Eksiksiz Başlangıç ve Uygulama Rehberi

Tailwind CSS, modern web arayüzlerini doğrudan HTML içinde, önceden tanımlanmış düşük seviyeli (utility) sınıflar kullanarak tasarlamanızı sağlayan bir framework'tür. Klasik CSS'deki "bir sınıf yaz, dosyaya git, özellikleri ekle" döngüsünü kırarak geliştirme sürecini muazzam derecede hızlandırır.

Utility-First Felsefesi

Kendi CSS kurallarınızı yazmak yerine; flex, pt-4, text-center ve rotate-90 gibi hazır sınıfları birleştirerek her türlü özgün tasarımı inşa edebilirsiniz.

1) Kurulum Yöntemleri

Tailwind'i projenize dahil etmenin iki popüler yolu vardır:

Play CDN (Hızlı Başlangıç): Deneme ve küçük projeler için idealdir.
<script src="https://cdn.tailwindcss.com"></script>
Tailwind CLI (Profesyonel): Projeyi yayına alırken sadece kullanılan sınıfları filtreleyerek (Purge) dosya boyutunu küçültür.

2) Layout Sistemi (Flex & Grid)

Tailwind, modern dizilim araçlarını en basit sınıflarla sunar:

Özellik	Tailwind Sınıfı	CSS Karşılığı
Esnek Kutu	`flex`	`display: flex;`
Izgara Yapısı	`grid`	`display: grid;`
Ortalama	`items-center`	`align-items: center;`
Boşluk	`gap-4`	`gap: 1rem;`

3) Responsive (Duyarlı) Tasarım

Mobil uyumlu tasarım yapmak Tailwind ile çok kolaydır. Sadece sınıfın başına cihaz öneki eklemeniz yeterlidir:

<!-- Mobil için kırmızı, tablet için mavi, masaüstü için yeşil arka plan -->
<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500">...</div>

4) Hazır Bileşen Örneği: Modern Profil Kartı

Aşağıdaki kodu kopyalayarak saniyeler içinde şık bir bileşen oluşturabilirsiniz:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.png" alt="Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">Kod Örnekleri</div>
    <p class="text-slate-500 text-sm">Yeni bir bildiriminiz var!</p>
    <button class="mt-2 px-3 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-200 hover:bg-indigo-600 hover:text-white transition-all">
        Görüntüle
    </button>
  </div>
</div>

💡 Önemli Not: Tailwind sınıfları çok fazla olduğu için başlangıçta ezberlemek zordur. Çalışırken tarayıcınızda her zaman bir Tailwind Cheat Sheet sekmesi açık tutmanızı öneririz.

Özet

Daha az CSS dosyası, daha hızlı geliştirme süreci.
Bileşen tabanlı (React, Vue, Blade vb.) projelerle tam uyum.
Karanlık mod (dark mode) desteğini dark: önekiyle kolayca ekleme.
Dosya boyutu optimizasyonu ile en yüksek Google PageSpeed puanları.

← Makalelere Dön Ana Sayfa