Tailwind CSS ile Responsive Tasarım: sm, md, lg ve Mobile-First Mantığı

Ön koşul: viewport meta etiketi

Resmî responsive design sayfası, kırılma noktası öneklerinin beklendiği gibi çalışması için belgenin <head> bölümüne viewport meta etiketinin eklenmesi gerektiğini belirtir. Bu etiket olmadan mobil tarayıcı sayfayı geniş bir sanal ekranda çizip küçültebilir; o durumda telefonda bile md: veya lg: kuralları devreye girebilir ve mobil için yazdığınız öneksiz sınıfları hiç görmezsiniz. Tailwind bu etiketi sizin yerinize eklemez, HTML şablonunuza kendiniz koyarsınız.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Varsayılan kırılma noktaları ve ürettikleri medya sorguları

Tailwind v4 kırılma noktalarını @theme içindeki --breakpoint-* değişkenleriyle tanımlar. v4.3.5 tema dosyasında beş değer vardır ve hepsi rem birimindedir. Aşağıdaki piksel karşılıkları, kök yazı boyutunun tarayıcı varsayılanı olan 16px olduğu varsayımıyla hesaplanmıştır; kullanıcı tarayıcıda yazı boyutunu büyütürse rem tabanlı kırılma noktaları da onunla birlikte ölçeklenir.

Sorgular klasik min-width yazımı yerine medya sorgusu aralık sözdizimini (width >= 40rem) kullanır. Anlam olarak ikisi aynıdır: genişlik bu değere eşit veya büyükse kural devreye girer. Kırılma noktalarının değiştirilmesi, yeni ad eklenmesi ve max-* ile aralık hedeflenmesi ayrı bir konu olduğu için Tailwind breakpoint özelleştirme ve max aralıkları yazısında anlatılıyor.

Mobile-first ne demek: sm: "küçük ekran" değildir

Resmî sayfanın özellikle uyardığı nokta şudur: sm: öneki "küçük ekranlarda" anlamına gelmez, "sm kırılma noktasından itibaren" anlamına gelir. Telefonu hedeflemek için önek kullanılmaz; telefon görünümü öneksiz sınıflardır. Aşağıdaki iki paragrafı birlikte derleyince fark netleşir.

<p class="sm:text-center">Yanlış: yalnızca 40rem ve üstünde ortalanır</p>
<p class="text-center sm:text-left">Doğru: mobilde ortada, sm ve üstünde solda</p>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  .text-center {
    text-align: center;
  }
  @media (width >= 40rem) {
    .sm\:text-center {
      text-align: center;
    }
    .sm\:text-left {
      text-align: left;
    }
  }
}

Çıktıda .sm\:text-center kuralı yalnızca @media (width >= 40rem) bloğunun içinde yer alır. Yani ilk paragraf 40rem altındaki ekranlarda ortalanmaz; tam tersine sadece geniş ekranlarda ortalanır. İkinci paragrafta ise .text-center her genişlikte geçerli, .sm\:text-left ise 40rem ve üstünde onu ezer. Doğru düşünme biçimi şudur: önce en dar görünümü sınıf öneki olmadan yazın, sonra genişledikçe neyin değişeceğini önekle ekleyin. Resmî sayfa da önce mobil düzeni kurup ardından sırasıyla sm, md ve sonraki kırılma noktaları için değişiklik eklemeyi önerir.

Üretilen CSS nasıl okunur

Önekli bir sınıf adı CSS seçicisine dönüşürken iki nokta işareti ters eğik çizgiyle kaçırılır: HTML içindeki md:w-32 sınıfı CSS dosyasında .md\:w-32 olarak görünür. Rakamla başlayan önekler biraz daha garip görünür, çünkü CSS seçicisi rakamla başlayamaz. Aşağıdaki girdide 2xl:p-10 sınıfı vardır.

@import "tailwindcss" source(none);
@source inline("text-center sm:text-left w-16 md:w-32 lg:w-48 xl:p-8 2xl:p-10");

v4.3.5 ile derlenen CSS (yalnızca utilities katmanı):

/* (kısaltıldı) */
@layer utilities {
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .text-center {
    text-align: center;
  }
  @media (width >= 40rem) {
    .sm\:text-left {
      text-align: left;
    }
  }
  @media (width >= 48rem) {
    .md\:w-32 {
      width: calc(var(--spacing) * 32);
    }
  }
  @media (width >= 64rem) {
    .lg\:w-48 {
      width: calc(var(--spacing) * 48);
    }
  }
  @media (width >= 80rem) {
    .xl\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
  @media (width >= 96rem) {
    .\32 xl\:p-10 {
      padding: calc(var(--spacing) * 10);
    }
  }
}

Buradan üç şey okunur. Birincisi, 2xl önekindeki "2" rakamı \32 (2 karakterinin onaltılık kodu ve ardından bir boşluk) olarak kaçırılmıştır; seçici .\32 xl\:p-10 hâline gelir ama HTML tarafında sınıfı yine 2xl:p-10 diye yazarsınız. İkincisi, önekli kurallar öneksiz kuralların arkasına ve kırılma noktası değerine göre küçükten büyüğe sıralanır. Aynı seçicilik düzeyindeki iki kuraldan sonra gelen kazandığı için, geniş ekranda büyük önekli kural küçük olanı ezer; bu sıralama mobile-first sistemin temelidir. Üçüncüsü, --spacing değeri 0.25rem olduğundan w-16 4rem, md:w-32 8rem, lg:w-48 12rem genişlik verir; 16px kökte bunlar 64px, 128px ve 192px eder. Boşluk ölçeğinin ayrıntısı padding, margin ve spacing yazısında.

Uygulamalı örnek: dar ekranda alt alta, geniş ekranda yan yana kart

Responsive tasarımın en sık örneği, telefonda görsel ile metnin alt alta, tablet ve masaüstünde yan yana durduğu karttır. Aşağıdaki işaretlemede öneksiz sınıflar mobil düzeni kurar, md: ve lg: önekleri ise genişledikçe değişen kısımları ekler.

<article class="flex flex-col gap-4 p-4 md:flex-row md:p-8">
  <img class="h-48 w-full object-cover md:h-auto md:w-48" src="kapak.jpg" alt="Kapak">
  <div>
    <h2 class="text-lg md:text-2xl">Başlık</h2>
    <p class="hidden lg:block">Yalnızca geniş ekranda görünen özet</p>
  </div>
</article>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .w-full {
    width: 100%;
  }
  .flex-col {
    flex-direction: column;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .object-cover {
    object-fit: cover;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  @media (width >= 48rem) {
    .md\:h-auto {
      height: auto;
    }
    .md\:w-48 {
      width: calc(var(--spacing) * 48);
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  @media (width >= 64rem) {
    .lg\:block {
      display: block;
    }
  }
}

Çıktıyı adım adım okuyalım. 48rem altındaki ekranlarda kart display: flex ve flex-direction: column ile dikey dizilir, görsel tam genişlikte ve 12rem yüksekliğindedir, iç boşluk 1rem olur. 48rem ve üstünde aynı @media bloğundaki beş kural birlikte devreye girer: yön satıra döner, görsel 12rem genişliğe sabitlenir ve yüksekliği auto olur, iç boşluk 2rem'e çıkar, başlık --text-2xl değerine (1.5rem) büyür. Özet paragrafı ise öneksiz hidden ile her yerde gizlidir ve yalnızca 64rem ve üstünde display: block alır.

Dikkat edilecek bir ayrıntı: Tailwind aynı kırılma noktasına ait kuralları tek bir @media bloğunda toplar. HTML'de sınıfları hangi sırayla yazdığınız bu gruplamayı değiştirmez; sıralamayı derleyici belirler. Bu yüzden md:p-8 p-4 yazmak ile p-4 md:p-8 yazmak aynı CSS'i üretir. Okunabilirlik için yine de öneksizden geniş öneke doğru yazmak iyi bir alışkanlıktır.

Responsive grid ve göster/gizle kalıbı

Kart listelerinde kolon sayısını genişliğe göre artırmak en yaygın ikinci kullanımdır. Skill'deki kalıp tek kolonla başlar, sm'de iki, lg'de dört kolona çıkar.

<ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"></ul>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

md için bir sınıf yazılmadığından 48rem ile 64rem arasında iki kolon korunur: mobile-first sistemde bir önek, bir sonraki önek onu ezene kadar geçerli kalır. Grid sınıflarının kendisi Tailwind grid-cols ve grid-rows yazısında, flex yön değişimi Tailwind flexbox sınıfları yazısında ayrıntılı anlatılıyor. Göster/gizle için ise iki ters kalıp vardır: hidden lg:block öğeyi yalnızca geniş ekranda gösterir, lg:hidden ise yalnızca dar ekranda gösterir. Display sınıflarının tamamı display, hidden ve block yazısında.

Kırılma noktasını durum varyantlarıyla birleştirmek

Kırılma noktası önekleri diğer varyantlarla yığılabilir. Resmî durum sayfasındaki örnek dark:md:hover:bg-fuchsia-600 sınıfıdır: koyu modda, md ve üstünde, fareyle üzerine gelindiğinde arka plan rengi değişir. Upgrade guide, v4'te yığılmış varyantların soldan sağa uygulandığını belirtir; bu, derlenen CSS'te soldaki varyantın dıştaki sarmalayıcı olması demektir.

<a class="md:hover:underline hover:text-sky-700">Bağlantı</a>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  @media (hover: hover) {
    .hover\:text-sky-700:hover {
      color: var(--color-sky-700);
    }
  }
  @media (width >= 48rem) {
    @media (hover: hover) {
      .md\:hover\:underline:hover {
        text-decoration-line: underline;
      }
    }
  }
}

md:hover:underline için dışta genişlik sorgusu, içte (hover: hover) sorgusu ve :hover seçicisi yer alır. Bu örnekte iki sorgu da medya sorgusu olduğu için sıranın sonuca etkisi yoktur, ama seçici üreten varyantlarda (örneğin *: ile first:) sıra sonucu değiştirir. Hover varyantının neden bir medya sorgusuyla sarıldığı ve diğer durum varyantları hover, focus ve active durumları yazısında, koyu mod ise Tailwind dark mode yazısında anlatılıyor. Burada --color-sky-700 tema değişkeninin v4.3.5 değeri oklch(50% 0.134 242.749)'dir.

Her utility responsive olabilir

Resmî sayfa, kırılma noktası öneklerinin çerçevedeki her utility sınıfında çalıştığını vurgular: yalnızca düzen sınıfları değil, harf aralığı, imleç biçimi, yazı tipi kalınlığı, görünürlük gibi her şey bir kırılma noktasına bağlanabilir. Bunun için ayrı bir ayar yapmanız gerekmez; sınıfı HTML'de önekle kullandığınız anda derleyici o kombinasyonu bulur ve ilgili @media bloğuna ekler. Tersine, kaynak dosyalarda geçmeyen bir kombinasyon hiç üretilmez. Dosya taramanın nasıl çalıştığı ve sınıf adını string birleştirerek oluşturmanın neden işe yaramadığı Tailwind class tarama ve @source yazısında.

Aynı kırılma noktasında iki sınıf: hangisi kazanır?

Bir öğeye aynı özelliği yazan iki öneksiz sınıf verirseniz, kazanan HTML'deki sıraya göre değil CSS dosyasındaki sıraya göre belirlenir. Aşağıdaki girdide p-4 ve p-8 birlikte kullanılıyor.

<div class="p-4 p-8 md:p-2"></div>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  @media (width >= 48rem) {
    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }
  }
}

48rem altında .p-8 sonra geldiği için 2rem iç boşluk uygulanır; p-8 p-4 diye yazsaydınız da sonuç değişmezdi. 48rem ve üstünde ise .md\:p-2 medya bloğunda en sonda olduğundan 0.5rem kazanır. Kısacası önekli kural, aynı özelliği yazan öneksiz kuralı her zaman ezer; ama iki öneksiz kural arasında bir tercih yapmaya çalışmak yerine birini silmek gerekir. Bu konu çakışan sınıflar ve important yazısında ayrıntılı ele alınıyor.

Viewport mu, kapsayıcı mı?

sm: ile 2xl: arasındaki önekler her zaman tarayıcı penceresinin genişliğine bakar. Aynı kart bileşeni bir sayfada geniş ana içerikte, başka bir sayfada dar bir kenar çubuğunda kullanılıyorsa viewport sorguları ikisini ayırt edemez. Resmî sayfa bu durum için container query varyantlarını (@container, @md: gibi) önerir; bunlar öğeyi ebeveyninin genişliğine göre biçimlendirir. Kullanımı Tailwind container queries yazısında. Sayfa iskeleti, başlık ve kenar çubuğu gibi genel düzen için viewport öneklerini, tekrar kullanılan bileşenlerin iç düzeni için container query varyantlarını düşünebilirsiniz.

Sık yapılan hatalar

• Mobil için sm: kullanmak: sm: 40rem ve üstüdür. Telefon görünümü öneksiz sınıflardır.
• Viewport meta etiketini unutmak: Etiket yoksa mobil tarayıcı sayfayı geniş ekran gibi çizebilir ve önekli kurallar beklenmedik şekilde devreye girer.
• Her kırılma noktasını tekrar yazmak: p-4 sm:p-4 md:p-8 lg:p-8 gereksizdir; p-4 md:p-8 aynı sonucu verir, çünkü her önek bir sonrakine kadar geçerli kalır.
• Sınıf adını değişkenle birleştirmek: md:grid-cols-${n} gibi parçalı adlar kaynakta tam sınıf olarak geçmediği için üretilmez.
• "Sadece md" sanmak: md:flex lg, xl ve 2xl'de de geçerlidir. Yalnızca bir aralık için md:max-lg:flex gibi bir kombinasyon gerekir.
• Piksel değerine güvenmek: Varsayılan kırılma noktaları rem'dir; tablodaki piksel değerleri yalnızca 16px kök yazı boyutunda geçerlidir.

Sık Sorulan Sorular

Tailwind'de sadece mobil için stil nasıl yazılır?

Önek kullanmadan yazıp daha geniş ekranlarda önekle geri alırsınız: text-center sm:text-left. Bir stili 40rem altıyla sınırlamak isterseniz max-sm: varyantı da vardır; derlendiğinde @media (width < 40rem) üretir. Aralıklar breakpoint özelleştirme yazısında.

Kırılma noktası piksel değerleri neden rem olarak çıkıyor?

v4.3.5 tema dosyasında --breakpoint-sm değişkeni 40rem olarak tanımlıdır ve medya sorgusu bu değeri doğrudan kullanır. 640px karşılığı yalnızca kök yazı boyutu 16px olduğunda geçerlidir.

Sınıfları HTML'de hangi sırayla yazmalıyım?

Derlenen CSS'teki sıra HTML sırasından bağımsızdır; önekli kurallar her zaman öneksizlerin arkasına ve kırılma noktası büyüklüğüne göre dizilir. Okunabilirlik için öneksizden geniş öneke doğru yazmak yeterlidir.

Kendi kırılma noktamı ekleyebilir miyim?

Evet, @theme içinde --breakpoint-xs: 30rem; gibi bir değişken tanımlarsanız xs: öneki kullanılabilir hâle gelir. Ekleme, silme ve birim karışıklığı konusundaki uyarı breakpoint özelleştirme ve max aralıkları yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · Breakpoint özelleştirme · Container queries · Hover ve focus durumları · Utility class mantığı · Mobil uyumluluk nedir · Tailwind CSS sıfırdan rehber