Tailwind CSS Width, Height ve Size: Boyut Sınıfları Nasıl Çalışır?

Üç değer türü: sayı, kesir, ad

Boyut sınıflarını okumanın en kolay yolu, sınıf adının sonundaki parçanın türüne bakmaktır. Sayı (w-24, h-64) boşluk ölçeğine gider ve sabit bir uzunluk verir. Kesir (w-2/5, h-9/10) üst elemanın boyutunun yüzdesidir. Ad (w-sm, max-w-xl) temadaki --container-* değişkenlerinden gelir. Bunlara ek olarak full, screen, auto, min, max, fit ve px gibi anahtar sözcükler vardır. Aşağıdaki küçük düzende üç türü bir arada görüyorsunuz:

<div class="flex">
  <aside class="w-64">Menü</aside>
  <main class="w-full md:w-2/3">İçerik</main>
</div>
<img class="size-12" src="logo.svg" alt="Logo">

@layer utilities {
  .flex {
    display: flex;
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-full {
    width: 100%;
  }
  @media (width >= 48rem) {
    .md\:w-2\/3 {
      width: calc(2 / 3 * 100%);
    }
  }
}

v4.3.5 ile derlenen CSS'te kesirlerin sabit bir yüzdeye çevrilmediğini, bunun yerine calc(2 / 3 * 100%) biçiminde bırakıldığını görüyorsunuz. Sınıf adındaki eğik çizgi seçicide \/ olarak kaçırılmıştır. Bu formül yüzünden kesirler de bir listeyle sınırlı değildir: denemede w-7/3 bile derlendi ve calc(7 / 3 * 100%) üretti. Resmî sayfadaki örnekler yarım, üçte bir, dörtte bir, beşte bir ve altıda bir gibi yaygın kesirleri gösterir; günlük işte bunların dışına pek çıkmanız gerekmez.

size-12 tek sınıfla hem width hem height yazar. İkon, avatar ve kare düğmeler için iki sınıf yerine bir sınıf demektir. CLI'daki canonicalize komutu da aynı değere sahip w-16 h-16 çiftini size-16 olarak sadeleştirdi. Komutun ayrıntıları standalone CLI yazısında.

Genişlik sınıfları

Tablodaki değerlerin hepsi CLI çıktısından alındı. w-fit, w-min ve w-max içeriğe göre boyut alır: fit-content içeriğe sığacak kadar genişler ama kullanılabilir alanı aşmaz, min-content en uzun kelimeye kadar daralır, max-content ise satırı hiç kırmadan içeriğin tamamını tek satırda tutmaya çalışır. w-screen görünüm alanının tam genişliğini alır; resmî sayfa büyük, küçük ve dinamik görünüm alanları için w-lvw, w-svw ve w-dvw sınıflarını da listeler.

w-auto en çok bir önceki değeri belirli bir kırılım noktasında geri almak için işe yarar. Resmî sayfadaki örnek w-full md:w-auto yazımıdır: mobilde tam genişlik, orta ekrandan itibaren içeriğe göre genişlik. Responsive önek mantığının kendisi responsive tasarım yazısında.

Yükseklik ve görünüm alanı birimleri

Yükseklik sınıfları genişlikle aynı mantığı izler: h-24 ölçekten, h-1/2 yüzde olarak, h-full 100% olarak gelir. Burada dikkat etmeniz gereken nokta, yüzde yüksekliklerin üst elemanın yüksekliğine göre hesaplanmasıdır. Üst elemanın belirli bir yüksekliği yoksa h-full beklediğiniz gibi uzamaz; bu durumda zinciri yukarı doğru takip edip bir noktada sabit veya görünüm alanına bağlı bir yükseklik vermeniz gerekir.

Mobil tarayıcılarda adres çubuğu gibi arayüz parçaları kaydırma sırasında gizlenip görünür. Resmî height sayfası h-dvh sınıfını tam da bu değişen yükseklik için önerir; h-lvh en geniş, h-svh en dar hâli hedefler. Tam ekran bir giriş bölümü yaparken hangi davranışı istediğinizi seçmeniz gerekir: arayüz açıkken bile içerik görünür kalsın istiyorsanız küçük yükseklik, kaydırma sırasında boyutun değişmesini dert etmiyorsanız dinamik yükseklik mantıklıdır. Görünüm alanı ve viewport meta etiketi kavramları mobil uyumluluk nedir yazısında anlatılıyor.

min ve max sınırları

min-w-*, max-w-*, min-h-* ve max-h-* sınıfları aynı değer türlerini kabul eder ve elemanın büyümesine ya da küçülmesine sınır koyar. En yaygın kullanım, genişliği akışkan bırakıp üst sınır vermektir: w-full max-w-md yazan bir kart dar ekranda tüm satırı kaplar, geniş ekranda 28rem'de durur. Uzun metinler için max-w-prose vardır ve satır uzunluğunu karakter sayısıyla sınırlar:

<section class="h-dvh">Tam ekran giriş</section>
<article class="mx-auto max-w-prose">Uzun metin</article>
<div class="w-full max-w-md min-h-48">Kart</div>

@layer theme {
  :root, :host {
    /* (kısaltıldı) */
    --spacing: 0.25rem;
    --container-md: 28rem;
    /* (kısaltıldı) */
  }
}
/* (kısaltıldı) */
@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .h-dvh {
    height: 100dvh;
  }
  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }
  .w-full {
    width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-prose {
    max-width: 65ch;
  }
}

Çıktının tema katmanına bakın: Tailwind yalnızca kullandığınız değişkenleri yazdı. max-w-md kullandığımız için --container-md: 28rem eklendi, diğer kapsayıcı boyutları dışarıda kaldı. max-w-prose ise temaya bağlı değildir ve doğrudan 65ch yazar; ch birimi yazı tipindeki "0" karakterinin genişliğine dayandığı için sınır, yazı boyutu büyüdükçe birlikte büyür. min-h-48 kartın içi boş olsa bile 12rem yükseklikte kalmasını sağlar.

min-w-0 sınıfının ürettiği değer min-width: 0px olur. min-h-screen ve min-h-dvh ise sayfa iskeletlerinde en az bir ekran yüksekliği sağlamak için kullanılır; içerik kısaysa alt bilgi ekranın altında kalır, uzunsa sayfa normal şekilde uzar. Bu kalıbı adım adım sayfa düzeni: header, sidebar, footer yazısında kurduk.

Kapsayıcı ölçeği: max-w-md, w-xl ve diğerleri

Adlı boyutlar temadaki --container-* değişkenlerinden gelir. Varsayılan temada --container-3xs 16rem ile başlar, xs 20rem, sm 24rem, md 28rem, lg 32rem, xl 36rem, 2xl 42rem, 3xl 48rem olur ve 7xl 80rem'e kadar çıkar. Resmî tema sayfası bu ad alanının hem container query varyantlarını (@sm: gibi) hem de max-w-md gibi boyut sınıflarını beslediğini söyler. Bu adlar kırılım noktalarının adlarıyla aynı görünse de değerleri farklıdır: max-w-md 28rem iken md: önekinin kırılım noktası 48rem'dir, bu yüzden ikisini birbirinin yerine düşünmeyin. Kapsayıcı sorgularının kendisi container queries kullanımı yazısının konusu.

Ölçekte olmayan bir adı kullanmak isterseniz önce temaya eklemeniz gerekir. Varsayılan temada max-w-8xl hiçbir CSS üretmedi. Temaya tek satır eklediğimizde hem max-w-8xl hem w-8xl çalıştı:

@import "tailwindcss";
@theme {
  --container-8xl: 96rem;
}

<div class="mx-auto max-w-8xl">Geniş sayfa</div>
<div class="w-8xl">Sabit genişlik</div>

/* (kısaltıldı) */
@layer utilities {
  /* (kısaltıldı) */
  .w-8xl {
    width: var(--container-8xl);
  }
  .max-w-8xl {
    max-width: var(--container-8xl);
  }
}

box-sizing: boyut neyi kapsar?

Bir kutuya w-64 verdiğinizde padding ve kenarlığın bu genişliğe dahil olup olmadığını box-sizing belirler. Resmî box-sizing sayfasına göre Tailwind, Preflight temel stilleriyle her elemanı border-box yapar; derlenen çıktıda da bütün elemanları kapsayan kuralda box-sizing: border-box satırı var. Yani padding ve kenarlık verdiğiniz genişliğin içinden yenir ve kutu büyümez. Tek bir eleman için eski davranışa dönmeniz gerekirse box-content sınıfı box-sizing: content-box yazar:

<div class="box-content size-32 border-4 p-4">Kutu</div>

@layer utilities {
  .box-content {
    box-sizing: content-box;
  }
  .size-32 {
    width: calc(var(--spacing) * 32);
    height: calc(var(--spacing) * 32);
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

Bu kutunun içerik alanı 8rem, çevresine 1rem padding ve 4px kenarlık eklenir; yani ekranda kapladığı alan 8rem'den büyüktür. Aynı sınıflar box-content olmadan yazılsaydı dış boyut tam 8rem olur, içerik alanı padding ve kenarlık kadar küçülürdü. Preflight'ın sıfırladığı diğer şeyler Preflight temel stiller yazısında.

Çalışan bir örnek: profil kartı

Şimdiye kadar gördüğümüz parçaları tek bir bileşende birleştirelim. Amaç, mobilde ekranı kaplayan ama geniş ekranda belirli bir genişlikte duran, avatarı ekran büyüdükçe büyüyen, açıklama alanı da çok uzun metinlerde sayfayı uzatmak yerine kendi içinde kayan bir profil kartı. Kenardaki alanın genişliği bir CSS değişkeninden, alt sınırı da keyfi bir piksel değerinden geliyor:

<div class="mx-auto w-full max-w-sm md:max-w-lg">
  <img class="size-16 md:size-24" src="profil.jpg" alt="">
  <div class="max-h-64 min-h-24 overflow-y-auto">Uzun açıklama</div>
  <aside class="w-(--kenar) min-w-[220px]">Yan alan</aside>
</div>

@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .w-\(--kenar\) {
    width: var(--kenar);
  }
  .w-full {
    width: 100%;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .min-w-\[220px\] {
    min-width: 220px;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  @media (width >= 48rem) {
    .md\:size-24 {
      width: calc(var(--spacing) * 24);
      height: calc(var(--spacing) * 24);
    }
    .md\:max-w-lg {
      max-width: var(--container-lg);
    }
  }
}

Kartın kendisi w-full ile her zaman bulunduğu alanın tamamını istemeye çalışıyor, max-w-sm bunu 24rem'de kesiyor ve md ve üstünde md:max-w-lg üst sınırı 32rem'e çıkarıyor. mx-auto sayesinde sınıra takılan kart ortada duruyor. Avatar mobilde size-16 ile 4rem kare, orta ekrandan itibaren 6rem kare oluyor; tek sınıf hem genişliği hem yüksekliği aynı anda değiştirdiği için oranı bozulmuyor.

Açıklama alanında üç sınıf birlikte çalışıyor: min-h-24 metin kısa olsa bile alanın 6rem'den kısa olmamasını, max-h-64 16rem'den uzun olmamasını sağlıyor, overflow-y-auto da sınırı aşan metni alanın içinde kaydırılabilir yapıyor. Üst sınır olmadan yalnızca overflow-y-auto yazsaydınız hiçbir şey kaymazdı, çünkü alan içerikle birlikte uzardı. Yan alanda ise w-(--kenar) genişliği sizin tanımlayacağınız --kenar değişkeninden alıyor, min-w-[220px] de değişken ne olursa olsun 220px'in altına inmesini engelliyor. Değişken tanımlı değilse width bildirimi geçersiz sayılır ve tarayıcı genişliği kendisi belirler; alt sınır yine de korunur.

Sık yapılan hatalar

• Üst elemanı yüksekliksiz h-full: yüzde yükseklik bir üst elemanın yüksekliğine göre hesaplanır; zincirde belirli bir yükseklik yoksa eleman uzamaz.
• Ölçekte olmayan ad: max-w-8xl gibi bir sınıf temaya --container-8xl eklenmeden CSS üretmez ve hata da vermez.
• Kesir toplamını aşmak: w-1/2 ile w-1/2 ve araya gap eklemek kapsayıcıdan taşar.
• Her şeye sabit genişlik vermek: w-96 küçük ekranda taşabilir; çoğu zaman w-full max-w-96 daha güvenlidir. Taşan içeriği yönetmek için overflow ve scroll snap yazısına bakın.
• Kare için iki sınıf yazmak: w-12 h-12 çalışır ama size-12 aynı işi tek sınıfla yapar.

Sık Sorulan Sorular

w-full ile w-screen arasındaki fark nedir?

w-full width: 100% yazar ve üst elemanın genişliğini alır. w-screen width: 100vw yazar ve üst elemandan bağımsız olarak görünüm alanının genişliğini alır. Bir kapsayıcının içindeki eleman için genellikle w-full istenir.

h-screen mi, h-dvh mi kullanmalıyım?

h-screen 100vh, h-dvh 100dvh üretir. Resmî belgeye göre dinamik birim, tarayıcı arayüzü açılıp kapandıkça değişen yüksekliği izler. Mobilde tam ekran bölümler için genellikle h-dvh, h-svh veya min-h-dvh daha öngörülebilir sonuç verir.

Belirli bir piksel genişliği nasıl veririm?

Keyfi değer yazın: w-[5px] doğrudan width: 5px üretir. Değeri bir CSS değişkeninden almak için w-(--my-width) kısaltması width: var(--my-width) yazar. Ayrıntılar arbitrary values yazısında.

w-1/3 ile w-[33.333%] aynı şey mi?

Pratikte çok yakındır ama aynı değildir. w-1/3, calc(1 / 3 * 100%) yazar ve hesabı tam kesirle tarayıcıya bırakır; w-[33.333%] ise yuvarlanmış bir değer yazar. Üç sütunu yan yana dizdiğinizde kesirli yazım toplamı tam yüzde yüze getirir, yuvarlanmış yazımda ise çok küçük bir boşluk kalabilir. Ölçekte karşılığı olan kesirleri sınıf adıyla yazmak hem daha kısa hem daha doğrudur.

Boyutu ekran genişliğine göre nasıl değiştiririm?

Bütün boyut sınıfları responsive öneklerle birleşir. w-full md:w-2/3 yazdığınızda ikinci sınıf @media (width >= 48rem) içine yazılır ve orta ekrandan itibaren genişliği üçte ikiye indirir. Aynı kural size-*, max-w-* ve h-* için de geçerlidir.

max-w-md kaç piksel?

max-w-md max-width: var(--container-md) yazar; varsayılan temada bu değişken 28rem'dir, yani kök yazı boyutu 16px iken 448px eder.

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 · padding ve margin · container sınıfı · flex-1, grow ve basis · sayfa düzeni · mobil uyumluluk