Bir web sayfasında elementlerin ne kadar yer kaplayacağını belirlemek, düzen (layout) tasarımının ilk adımıdır. Tailwind CSS, hem sabit boyutlar (piksel bazlı) hem de duyarlı (yüzdelik bazlı) boyutlar için çok kapsamlı bir sınıf seti sunar.
Bu derste w- (width) ve h- (height) sınıflarının mantığını ve sık kullanılan boyutlandırma stratejilerini inceleyeceğiz.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
1. Genişlik (Width) Ayarları
Tailwind'de genişlik vermek için w-{değer} yapısı kullanılır.
a) Sabit Genişlikler: Küçük ikonlar veya boyutu değişmemesi gereken kutular için kullanılır. Spacing (boşluk) dersindeki ölçek burada da geçerlidir (1 birim = 0.25rem = 4px).
- w-4: 16px genişlik.
- w-64: 256px genişlik.
- w-px: Sadece 1 piksel genişlik.
b) Yüzdelik (Akışkan) Genişlikler: Responsive tasarımlarda en çok kullanılan yöntemdir. Kesirli sayılar kullanarak alanın ne kadarını kaplayacağını belirtirsiniz.
- w-1/2: %50 genişlik (Yarım).
- w-1/3: %33.3 genişlik (Üçte bir).
- w-full: %100 genişlik (Kapsayıcının tamamı).
- w-screen: 100vw (Ekranın tamamı).
Örnek (İki Kolonlu Yapı):
<div class="flex"> <div class="w-1/3 bg-blue-200">Sol Menü (%33)</div> <div class="w-2/3 bg-green-200">Ana İçerik (%66)</div> </div>
2. Yükseklik (Height) Ayarları
Yükseklik vermek için h-{değer} yapısı kullanılır.
a) Sabit ve Yüzdelik Yükseklikler: Mantık genişlik ile aynıdır. Ancak dikkat etmeniz gereken bir nokta vardır: h-full (%100 yükseklik) kullanabilmeniz için, kapsayıcı elemanın (parent) da belirli bir yüksekliği olması gerekir.
- h-12: Butonlar veya navbar için ideal sabit yükseklik.
- h-full: Ebeveyn elementin yüksekliği kadar yer kaplar.
b) Ekran Yüksekliği (Viewport Height): Özellikle "Hero" (Giriş) bölümleri veya tam sayfa tasarımlar için hayati önem taşır.
- h-screen: Ekranın o an görünen yüksekliğinin tamamını kaplar (100vh).
Örnek (Tam Ekran Hero Bölümü):
<div class="h-screen bg-gray-900 text-white flex items-center justify-center"> <h1>Hoş Geldiniz</h1> </div>
(Bu kod, kullanıcı sayfayı açtığında ekranı tamamen kaplayan bir giriş alanı oluşturur.)
3. Maksimum ve Minimum Boyutlar
Tasarımın bozulmasını engellemek için sınırlayıcılar kullanılır.
a) Maksimum Genişlik (max-w): Metinlerin ekrana yayılıp okunmasının zorlaşmasını engellemek için metin kapsayıcılarında çok sık kullanılır.
- max-w-md: Orta boy bir genişlik sınırı koyar.
- max-w-full: Genişlik %100'ü geçmesin.
- max-w-screen-xl: İçeriği belli bir genişlikte (container gibi) tutar.
Pro İpucu: Okunabilir Makaleler İçin Blog yazılarında satırların çok uzun olması gözü yorar. Bu yüzden makale kapsayıcısına max-w-prose (Tailwind Typography eklentisi ile) veya max-w-2xl vererek ideal okuma genişliği sağlanır.
<article class="max-w-2xl mx-auto"> <p>Buradaki metinler ekran çok geniş olsa bile belli bir sınırda kalır, böylece okuması kolaylaşır.</p> </article>
b) Minimum Yükseklik (min-h): İçerik az olsa bile sayfanın veya kutunun belirli bir boyuttan küçük olmamasını sağlar.
- min-h-screen: İçerik az olsa bile arka planın tüm ekranı kaplamasını garanti eder. (Footer'ın yukarı kaçmasını engellemek için sıkça kullanılır).
Özet ve Sonraki Adım
Bu derste elementlerimizin boyutlarını kontrol altına aldık.
- w-1/2 gibi kesirli ifadelerle ızgara (grid) mantığının temelini attık.
- h-screen ile modern tam ekran tasarımların sırrını öğrendik.
- max-w ile içeriğin okunabilir kalmasını sağladık.
Artık kutularımızı boyutlandırabiliyoruz. Ancak bu kutuları yan yana dizmek, hizalamak ve esnek yapılar kurmak için modern web'in en güçlü silahını öğrenme vakti geldi.
Bir sonraki derste Flexbox'a Giriş: Flex, Justify ve Align konularını derinlemesine inceleyeceğiz.