Tailwind CSS: CSS yazmadan tasarım

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Tailwind bir HTML öğesine küçük yardımcı sınıflar yazarak CSS özelliklerini uygulamana olanak verir. p-4 bir boşluk ölçeğine, flex display özelliğine, rounded bir kenar yuvarlama değerine karşılık gelir. Bu sınıflar HTML’in veya CSS’in yerine başka bir dil koymaz; üretilen stil kurallarını seçmenin bir yoludur.

Sınıf adını ezberlemekten önce hangi CSS kavramını kullandığını bilmelisin. Esnek yerleşim bilmiyorsan flex yazmak tek başına doğru düzeni sağlamaz. Bir kartın sınıflarını boşluk, tipografi, yüzey ve etkileşim olarak gruplandırarak okumak uzun class metnini daha anlaşılır yapar.

Bu sitedeki bazı eski örnekler öğrenme kolaylığı için tarayıcı CDN yaklaşımı kullanır. Gerçek projede seçtiğin Tailwind sürümünün resmî kurulumunu izle ve gerekli CSS’i derle. Sürümler arasında kurulum ve bazı adlar değişebilir. Bir sınıf uygulanmıyorsa önce derlenmiş CSS’te o kuralın varlığını denetle.

İlk örneği oku ve dene

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-6 rounded-2xl bg-indigo-500 p-6 text-white shadow-lg">
  <h2 class="text-2xl font-bold">Merhaba Tailwind!</h2>
  <p class="mt-2">Bu kutuyu hiç CSS yazmadan, sadece sınıflarla tasarladım.</p>
</div>

Mor zeminli, yuvarlak köşeli, gölgeli bir kartın içinde beyaz bir başlık ve yazı görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. Önce normal CSS ile kutunun amacını açıklayabilmelisin.
2. Yardımcı sınıflar build sonucunda gerçek CSS kurallarına dönüşür.
3. Responsive önekler belirli genişliklerde ek kurallar uygular.
4. Kopyalanmış uzun class listesini tek tek gruplara ayırarak incele.

<style>
.kart{padding:16px;border:1px solid #cbd5e1;border-radius:12px}
.baslik{font-size:24px;font-weight:700}
</style>
<article class="kart"><h2 class="baslik">Önce CSS mantığı</h2><p>Bu çalışan örnek Tailwind kurulumu istemez.</p></article>

Yardımcı sınıfların karşılığı anlaşılabilen, normal CSS ile çalışan bir kart.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. padding, border ve font-size kurallarının görevlerini açıkla.
2. Tailwind örneğindeki sınıfları ilgili CSS kavramlarıyla eşleştir.
3. Yerel projede resmî kurulumla derleme yap; HTML görünürken CSS yüklenmeyen durumu Network ile ayır.

<style>.alan{display:flex;gap:12px;padding:16px}.etiket{font-weight:700}</style>
<div class="alan"><span class="etiket">HTML</span><span>İçerik</span></div>

Yan yana yerleşen, aralarında boşluk olan iki metin.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. CDN tabanlı öğrenme örneğini üretim için varsayılan tercih sayma; resmî derleme kurulumunu öğren.
2. Sınıfı eklemek onun CSS dosyasında bulunduğunu garanti etmez; derleyicinin taradığı kaynakları kontrol et.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Tailwind kullanınca CSS kutu modelini öğrenmek gereksiz olur mu?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.