Position dersinde elementleri yerleştirdik. Şimdi ise bu elementlerin "nasıl görüneceğini", "ne kadar yer kaplayacağını" veya "hangisinin önde duracağını" belirleyeceğiz.
1. Display (Görüntüleme) Modları
HTML etiketlerinin varsayılan davranışlarını değiştirmek için kullanılır.
block (Blok):
- Element bulunduğu satırı boydan boya kaplar. Yanına başka eleman gelemez (Alt satıra iter).
- div, p, h1, section varsayılan olarak block'tur.
- Tailwind Sınıfı: block
inline (Satır İçi):
- Element sadece içeriği kadar yer kaplar. Yanına başka elemanlar gelebilir.
- Genişlik (w) ve Yükseklik (h) verilemez. Padding/Margin dikeyde çalışmaz.
- span, a, b varsayılan olarak inline'dır.
- Tailwind Sınıfı: inline
inline-block (Melez):
- Hem yan yana dizilir (inline gibi) hem de genişlik/yükseklik alabilir (block gibi).
- Tailwind Sınıfı: inline-block
hidden (Gizli):
- Elementi sayfadan tamamen siler ("Yok" eder). Yer kaplamaz.
- CSS karşılığı: display: none;
- Tailwind Sınıfı: hidden
2. Responsive Göster/Gizle (Çok Önemli!)
Modern web sitelerinde menü butonu mobilde görünür, masaüstünde gizlenir. Bunu Tailwind ile yapmak çok basittir.
Kural: Tailwind'de "gizle ama şunda göster" mantığıyla çalışılır.
Örnek:
<div class="hidden md:block bg-blue-100 p-4"> Bu kutu sadece Tablet ve Masaüstünde görünür! Mobilde yok olur. </div>
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
3. Visibility (Görünürlük)
hidden sınıfından farkı şudur: Element görünmez olur ama kapladığı yer (boşluk) sayfada kalmaya devam eder.
- invisible: Görünmez yap (Boşluk kalır).
- visible: Görünür yap.
Kullanım Senaryosu: Bir butona hover yapınca içinde ikon belirmesini istiyorsunuz ama ikon yokken butonun küçülmesini istemiyorsunuz.
4. Z-Index (Katman Sıralaması)
Sayfada elementler üst üste bindiğinde (Position kullanıldığında), hangisinin önde, hangisinin arkada duracağını belirler.
- Mantık: Sayı ne kadar büyükse, element o kadar "kullanıcıya yakın" (önde) durur.
- Şart: Z-index'in çalışması için elementin static OLMAMASI (yani relative, absolute, fixed veya sticky olması) gerekir.
Tailwind Sınıfları:
- z-0 (Taban)
- z-10
- z-20
- ...
- z-50 (En üst katman)
Örnek: Açılır Menü (Dropdown) Sorunu Eğer açılır menünüz, alttaki resmin altında kalıyorsa z-index vermeniz gerekir.
<nav class="relative z-50 bg-white shadow"> Açılır Menü İçeriği... </nav> <div class="relative z-0"> <img src="slider.jpg"> </div>
Sonraki Adım: Temel kavramların en zorlu kısımlarını (Position, Display, Z-Index) geride bıraktık. Artık bu parçaları birleştirip büyük resmi oluşturma vakti.