Tailwind CSS Modül 1: Tailwind CSS'e Giriş ve Utility Mantığı

1.1 Tailwind CSS Nedir? Utility-First Yaklaşım

Kolay

Ders 1 / 27 %0 Ders listesi

1.1 Tailwind CSS Nedir? Utility-First Yaklaşım 1.2 Kurulum: CDN ve Tailwind CLI 1.3 Renk Sistemi: Metin ve Arka Plan Renkleri 1.4 Tipografi: Boyut, Kalınlık ve Hizalama 2.1 Padding ve Margin (Spacing Ölçeği) 2.2 Genişlik ve Yükseklik 2.3 Kenarlık, Köşe Yuvarlama ve Gölge 2.4 Display, Position ve Z-Index 3.1 Flexbox Temelleri 3.2 Flex ile Kart Sıralama ve Ortalama 3.3 CSS Grid ile Izgara Düzeni 3.4 col-span ile Dashboard Düzeni 3.5 Hatayı Bul: Kart Ortalanmıyor 4.1 Responsive Tasarım: sm, md, lg Önekleri 4.2 Hover, Focus ve Active Durumları 4.3 Group Hover ile Kart Efektleri 4.4 Dark Mode (Karanlık Tema) 4.5 Hatayı Bul: Telefonda Sıkışan Kartlar 5.1 Buton Varyantları Tasarlamak 5.2 Form Elemanlarını Şekillendirmek 5.3 @apply ve Tema Özelleştirme 5.4 Rozetler, Uyarılar ve Avatar Grupları 6.1 Proje 1: Landing Page Hero Alanı 6.2 Proje 2: Fiyatlandırma Tablosu 6.3 Proje 3: Sosyal Profil Kartı 6.4 Proje 4: Giriş (Login) Sayfası 6.5 Proje 5: Yönetim Paneli (Dashboard)

Misafir olarak çalışıyorsun. İlerlemeni kaydetmek ve sonraki dersleri açmak için giriş yap. Giriş yap / Kayıt ol

Tailwind CSS Nedir?

Bir butonu maviye boyamak istediğini düşün. Klasik CSS'te önce HTML'e bir isim verirsin (class="kayit-butonu"), sonra CSS dosyasına geçip o ismin kurallarını yazarsın. Proje büyüdükçe yüzlerce isim uydurman, hangisinin nerede kullanıldığını hatırlaman gerekir. Bir sınıfı silmeye korkarsın, çünkü başka bir sayfayı bozabilir.

Tailwind CSS bu sorunu farklı çözer: isim uydurmak yerine, her biri tek bir CSS özelliğine karşılık gelen hazır sınıfları HTML'de yan yana yazarsın. Buna utility-first (önce küçük araçlar) yaklaşımı denir.

Sınıf = tek bir CSS kuralı

Tailwind sınıfı	Karşılık gelen CSS
`text-3xl`	`font-size: 1.875rem`
`font-bold`	`font-weight: 700`
`text-blue-600`	`color: #2563eb`
`p-4`	`padding: 1rem`

Örnek KodHTML

<p class="text-xl font-semibold text-emerald-700">Kaydın tamamlandı</p>

Bu satırı okuyan biri, ayrı bir CSS dosyasına bakmadan yazının büyük, yarı kalın ve yeşil olacağını hemen anlar.

Bootstrap'ten farkı

Bootstrap sana hazır btn ve card bileşenleri verir; hepsi birbirine benzer. Tailwind ise hazır bileşen vermez, sana yapı taşlarını verir. Daha çok sınıf yazarsın ama tasarım tamamen senin olur.

Neden tercih ediliyor?

Tutarlılık: Renkler (blue-50 ile blue-950 arası) ve boşluklar hazır bir ölçeğe dayanır; rastgele 13px gibi değerler kullanmazsın.
Küçük dosya: Derleme sırasında projede kullanmadığın sınıflar atılır.
Hız: Responsive tasarım ve hover gibi durumlar md: ve hover: önekleriyle tek satırda yazılır.

Sık yapılan hatalar

class yerine className yazmak: O React'a özeldir, düz HTML'de class kullanılır.
Sınıfları virgülle ayırmak: class="text-3xl, font-bold" çalışmaz, sadece boşluk kullan.

Görev Kendin yazarak öğren

Bir <h1> başlığı yaz, içine Merhaba Tailwind! yaz.
Başlığa text-3xl, font-bold ve text-blue-600 sınıflarını ver.
Çalıştır ve önizlemede sonucu gör.

Bilgi Kontrol Quizi

Tailwind CSS'in temel yaklaşımı hangisidir?

index.html Tailwind CSS

Parantez ve tırnaklar kendiliğinden kapanır. Tab girinti ekler; editörden çıkmak için önce Esc, sonra Tab.

Çıktı Konsolu: Hazır

Çıktı görmek için "Kodu Çalıştır" butonuna basın...