CSS · Tailwind CSS: CSS yazmadan tasarım — videolu atölye

Tailwind CSS: CSS yazmadan tasarım

Tailwind sınıflarını bildiğin CSS kurallarıyla ilişkilendirmek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

Önce normal CSS ile kutunun amacını açıklayabilmelisin. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

Kopyalanmış uzun class listesini tek tek gruplara ayırarak incele.

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

Bir değeri sen değiştir

padding, border ve font-size kurallarının görevlerini açıkla. Tailwind örneğindeki sınıfları ilgili CSS kavramlarıyla eşleştir.

Hata nereden gelir?

CDN tabanlı öğrenme örneğini üretim için varsayılan tercih sayma; resmî derleme kurulumunu öğren.

Kendi çözümünü kur

Yerel projede resmî kurulumla derleme yap; HTML görünürken CSS yüklenmeyen durumu Network ile ayır. Sınıf metni bir stil dosyası değildir; onu tanımlayan CSS’in sayfada bulunması gerekir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştı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>

Kendini kontrol et

Tailwind kullanınca CSS kutu modelini öğrenmek gereksiz olur mu? Yanıt: Hayır; yardımcı sınıflar aynı CSS özelliklerini uygular, temel kavramlar yine gereklidir.

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