Responsive Tasarım: Breakpointler (sm, md, lg, xl) ve Mobile-First Mantığı

Eskiden web sitelerini mobil uyumlu yapmak için yüzlerce satır "Media Query" (@media) yazardık. Tailwind CSS ise bu süreci "Mobile-First" (Önce Mobil) yaklaşımıyla kökten değiştirir.

Bu derste, yazdığınız kodun telefonda, tablette ve masaüstü bilgisayarda nasıl farklı görüneceğini kontrol etmeyi öğreneceksiniz.

1. Mobile-First (Önce Mobil) Nedir?

Tailwind CSS varsayılan olarak mobil cihazları baz alır. Yani, önüne hiçbir ön ek koymadan yazdığınız bir kod (örneğin block), aslında "tüm ekranlarda (mobilden başlayarak)" geçerlidir.

Eğer bir stilin sadece büyük ekranlarda değişmesini istiyorsanız, o zaman Breakpoint (Kırılma Noktası) ön eklerini kullanırsınız.

• Yanlış Mantık: "Bu kodu sadece telefonda çalıştır."
• Doğru Mantık (Tailwind): "Bu kodu varsayılan yap (telefon dahil), ekran şu kadar büyürse değiştir."

2. Breakpoint Ölçüleri

Tailwind, standart olarak 5 ana kırılma noktası sunar. Bu ön ekler, "Ekran genişliği en az bu kadar olduğunda..." anlamına gelir (min-width).

• (Ön eksiz): Mobil cihazlar (< 640px)
• sm: (Small) - 640px ve üzeri (Büyük telefonlar / Küçük tabletler)
• md: (Medium) - 768px ve üzeri (Tabletler - iPad vb.)
• lg: (Large) - 1024px ve üzeri (Küçük Laptoplar)
• xl: (Extra Large) - 1280px ve üzeri (Masaüstü Monitörler)
• 2xl: (Double Extra Large) - 1536px ve üzeri (Geniş Ekranlar)

3. Nasıl Kullanılır?

Mantık şudur: {breakpoint}:{özellik}

Örneğin, bir kutunun arka planı mobilde kırmızı, tablette sarı, masaüstünde yeşil olsun istiyoruz.

<div class="bg-red-500 md:bg-yellow-500 lg:bg-green-500 h-32">
  Ekranı küçültüp büyüterek rengin değişimini izleyin.
</div>

Kodun Okunuşu:

1. bg-red-500: Varsayılan olarak (0px'den itibaren) kırmızısın.
2. md:bg-yellow-500: Ekran 768px'e (Medium) ulaştığında sarı ol (kırmızıyı ez).
3. lg:bg-green-500: Ekran 1024px'e (Large) ulaştığında yeşil ol (sarıyı ez).

4. Sık Yapılan Hata: sm: Mobil Demek Değildir!

Yeni başlayanların en çok düştüğü tuzak şudur: "Mobilde metni ortalamak istiyorum, o yüzden sm:text-center yazayım." YANLIŞ.

• sm:text-center derseniz: "Ekran 640px'den büyükse ortala" demiş olursunuz. Yani mobilde (640px altı) çalışmaz.
• Doğrusu: text-center (Mobilde ve her yerde ortala), md:text-left (Tablet ve üstünde sola yasla).

5. Pratik Örnek: Responsive Kart Yapısı

Mobilde alt alta duran, masaüstünde yan yana gelen klasik bir kart düzeni kuralım.

<div class="flex flex-col md:flex-row gap-4">
  
  <div class="w-full md:w-1/2 bg-blue-100 p-4">
    <h2 class="text-xl font-bold">Sol İçerik</h2>
    <p>Mobilde üstte, masaüstünde solda.</p>
  </div>

  <div class="w-full md:w-1/2 bg-green-100 p-4">
    <h2 class="text-xl font-bold">Sağ İçerik</h2>
    <p>Mobilde altta, masaüstünde sağda.</p>
  </div>

</div>

Bu örnekte:

• Layout: flex-col ile mobilde dikey başladık, md:flex-row ile tablette yataya döndük.
• Genişlik: w-full ile mobilde tam genişlik verdik, md:w-1/2 ile tablette %50 genişliğe düşürdük.