TAILWIND RESPONSIVE UTILITY KULLANMAK

Bir tasarımcı Figma'da mobil ve masaüstü ekran tasarlar; geliştirici bunu koda dökerken iki ayrı CSS dosyası yazmak zorunda kalmak ister mi? Tailwind responsive utility yaklaşımı bu ihtiyacı tamamen değiştirir. Tek bir HTML elemanına farklı ekranlarda farklı davranış tanımlamak utility sınıflarıyla mümkün hale gelir.

Tailwind'in mobile-first yaklaşımı şudur: önce mobil tasarımı yap; sonra "şu ekrandan sonra şöyle davransın" diye ekle. Bu mantık modern responsive tasarımın altın kuralıdır; sınıfların tam listesi ve davranışları için resmi Tailwind dokümantasyonu sürekli güncel kalan en sağlam kaynaktır. Kırılma noktası (breakpoint) ön ekleriyle çalışır: sm, md, lg, xl, 2xl.

Aşağıda Tailwind responsive utility'lerinin nasıl çalıştığını, kırılma noktası mantığını, sık kullanılan desenleri ve performans dostu uygulamaları örneklerle anlatıyoruz.

Tailwind kırılma noktaları

Tailwind varsayılan beş kırılma noktasıyla gelir:

Bu ön ekler "şu ekran boyutundan başlayarak" anlamına gelir. md:p-8 derseniz "768 piksel ve üstünde padding 8 olsun" demektir; daha küçük ekranlarda padding farklı olur.

Mobile-first mantığı

Tailwind'in en önemli prensibi: önce mobil yaz; sonra büyük ekranlar için override et.

<!-- Yanlış (desktop-first düşünce) -->
<div class="text-xl sm:text-base">
  Büyük ekranda küçük olsun?
</div>

<!-- Doğru (mobile-first) -->
<div class="text-base md:text-xl">
  Telefonda küçük (base), tablet ve üstünde büyük (xl)
</div>

Ön ek olmayan sınıflar tüm ekranlar için varsayılan; ön ekli sınıflar belirli ekran ve üstü için geçerli. Bu mantığı kavradığınızda responsive yazımı bütünüyle değişir.

Sık kullanılan responsive desenler

Mobilde tek sütun, masaüstünde iki sütun

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div>Sol içerik</div>
  <div>Sağ içerik</div>
</div>

Mobilde gizli, masaüstünde görünür (örneğin sidebar)

<aside class="hidden lg:block w-64">
  Sadece laptop ve üstünde görünür
</aside>

<!-- Tersi: mobilde görünür, masaüstünde gizli -->
<button class="block lg:hidden">
  Hamburger menü (sadece mobilde)
</button>

Mobilde stack, masaüstünde yan yana (flexbox)

<div class="flex flex-col md:flex-row gap-4">
  <div>Kart 1</div>
  <div>Kart 2</div>
  <div>Kart 3</div>
</div>

Görsel boyutu ekrana göre değişen

<img src="..." class="w-full md:w-1/2 lg:w-1/3">
<!-- Mobilde tam, tablet'te yarım, laptop'ta üçte bir genişlik -->

Tipografi ölçeği

<h1 class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
  Ekran büyüdükçe başlık büyür
</h1>

Padding ve margin ölçekleri

<section class="p-4 md:p-8 lg:p-12 xl:p-16">
  Mobilde dar padding, masaüstünde geniş
</section>

Container ve max-width

Tailwind'in container sınıfı responsive bir yapı sağlar; ekran boyutuna göre genişlik değiştirir.

<div class="container mx-auto px-4">
  İçerik buraya
</div>

Ama container'ı her zaman ortalamak için mx-auto eklenmesi gerekir. px-4 kenarlardan boşluk verir; çok kenara yapışmasın diye.

Maksimum genişlik kontrolü için ayrı sınıflar:

<article class="max-w-prose mx-auto">
  Okuma için ideal genişlik (~65 karakter)
</article>

<div class="max-w-7xl mx-auto">
  Sayfa ana içerik (1280px)
</div>

Responsive form düzeni

Bir formun mobilde tek sütun, masaüstünde iki sütun olması yaygın istek.

<form class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div>
    <label class="block text-sm font-medium">Ad</label>
    <input type="text" class="w-full border rounded px-3 py-2">
  </div>

  <div>
    <label class="block text-sm font-medium">Soyad</label>
    <input type="text" class="w-full border rounded px-3 py-2">
  </div>

  <div class="md:col-span-2">
    <label class="block text-sm font-medium">Mesaj</label>
    <textarea class="w-full border rounded px-3 py-2"></textarea>
  </div>
</form>

Burada md:col-span-2 mesaj alanının masaüstünde iki sütunu da kaplamasını sağlıyor.

Mobilde hamburger menü

<nav class="flex items-center justify-between p-4">
  <div>Logo</div>

  <!-- Masaüstü menü -->
  <ul class="hidden md:flex gap-6">
    <li>Anasayfa</li>
    <li>Hakkımızda</li>
    <li>İletişim</li>
  </ul>

  <!-- Hamburger butonu (mobilde) -->
  <button class="md:hidden">☰</button>
</nav>

JavaScript ile hamburger tıklandığında açılan mobil menü için ek state yönetimi gerekir; React veya Alpine.js ile kombinlenir.

Responsive img yükleme

Tailwind doğrudan görsel kaynağını değiştirmez (bu HTML attribute işi) ama görselin nasıl davrandığını kontrol eder.

<picture>
  <source media="(min-width: 768px)" srcset="masaustu.webp">
  <img src="mobil.webp" alt="..."
       class="w-full h-64 md:h-96 object-cover">
</picture>

Burada srcset ile gerçek dosya farklılaşır (performans için), Tailwind sınıfları ise davranışı kontrol eder.

Hover ve focus durumları

Responsive yanında durum sınıfları (state variants) da Tailwind'in gücüdür.

<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:ring-2 focus:ring-blue-300
  md:px-8 md:py-3
">
  Detay
</button>

Bir sınıfı hem ekran ön ekiyle hem durum ön ekiyle birleştirmek mümkün: md:hover:bg-blue-700 "masaüstünde hover'da koyu mavi" demek.

Layout kayması (CLS) önleme

Responsive layout yaparken sayfa yüklenirken oynaması (Cumulative Layout Shift) yaygın sorun. Tailwind ile çözüm:

• Görsellere boyut verin: w-full h-64 md:h-96 ile yüksekliği önceden belirleyin; görsel yüklenirken sayfa oynamaz
• Aspect ratio kullanın: aspect-video, aspect-square sınıfları oranı korur
• Font boyutu sabitliği: Web font yüklenirken yedek font ile yaklaşık aynı boyut tutulmalı; font-display: swap
• Yer tutucu alanlar: Yorum sayısı, dinamik veri yüklenirken minimum height verin

Performans ipuçları

JIT (Just-In-Time) compiler

Tailwind v3'ten beri JIT varsayılan. Sadece kullanılan sınıflar derleme çıktısına dahil; CSS dosya boyutu çok küçük (5-15 KB).

PurgeCSS otomatik

Üretim build'inde Tailwind tüm kullanılmayan sınıfları otomatik çıkarır. tailwind.config.js'deki content alanı doğru ayarlandığında çalışır.

Custom değer kullanımı

Standart spacing yetmediğinde [arbitrary] sözdizimi var: w-[173px], text-[#1234ab]. Bu özellik kötüye kullanılmamalı; her custom değer design system'inden sapma anlamına gelir.

Sık Görülen Sorunlar hatalar

1. Desktop-first düşünmek: Tailwind mobile-first; ön ekler sadece "şundan büyük" işe yarar. md:hidden mobilde gizler değil; tablet ve üstünde gizler
2. Aşırı custom değer: w-[473px] gibi her boyutu özel yazmak design system'i bozar; spacing scale'i kullanın
3. Tüm breakpoint'ler için yazmak: "sm:text-base md:text-base lg:text-base" gibi tekrar; tek "text-base" yeterli
4. hidden ve visible karışıklığı: hidden sınıfı display:none; visibility:invisible için ayrı sınıf var
5. Container'ı manuel ortalamak: container sınıfı tek başına ortalama yapmaz; mx-auto eklenmeli

Sonraki Hamle

Tailwind responsive yaklaşımı modern frontend'in temel becerilerinden. Pratiği sürekli biçimde geliştirmek için Tailwind CSS eğitimi programları utility-first felsefe, kırılma noktaları ve component yapısını uygulamalı şekilde aktarır.

Özetle

Tailwind responsive utility'leri; mobile-first felsefe ile ön ekleri (sm, md, lg, xl, 2xl) kullanarak tek bir HTML elemanına farklı ekranlarda farklı davranış kazandırır. Sık kullanılan desenler (mobilde tek sütun masaüstünde grid, hamburger menü, hidden-block geçişi) standart sınıflarla 1-2 satırda kurulur. JIT compiler ve PurgeCSS sayesinde CSS dosya boyutu küçük kalır. Performans dostu ve okunabilir bir yaklaşımdır; ekipler aynı dili konuşur, kod inceleme kolaylaşır. Sıfırdan başlayan modern projelerde Tailwind responsive sistemi neredeyse her durumda doğru seçimdir.