Tailwind CSS'teki container sınıfı bir elemana width: 100% verir ve her kırılım noktasında max-width değerini o kırılım noktasının genişliğine eşitler: 40rem, 48rem, 64rem, 80rem ve 96rem. Önemli ayrıntı şudur: resmî belgeye göre bu sınıf kendini otomatik olarak ortalamaz ve yerleşik yatay padding içermez. Bu yüzden genellikle container mx-auto px-4 olarak yazılır.

Bu yazıda container sınıfının Tailwind CSS v4.3.5 ile derlenen gerçek çıktısını satır satır okuyacak, onu @utility direktifiyle varsayılan olarak ortalanan ve padding'li bir sınıfa nasıl çevireceğinizi, kırılım noktalarını değiştirmenin container sınıfını nasıl etkilediğini ve max-w-7xl gibi sabit bir üst sınırla arasındaki farkı göreceksiniz. Container queries için kullanılan @container sınıfı ise başka bir şeydir; ona da kısaca değineceğiz. Serinin tamamı Tailwind öğrenme rehberinde.

container sınıfı ne üretir?

container sınıfı ne üretir?
html
<div class="container mx-auto px-4">
  Sayfa içeriği
</div>
css
@layer utilities {
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
}

v4.3.5 ile derlenen bu CSS'te .container kuralının içinde iç içe yazılmış beş @media bloğu görüyorsunuz. Temel durumda eleman width: 100% ile bulunduğu alanın tamamını kaplar ve bir üst sınırı yoktur. Görünüm alanı 40rem ve üstüne çıktığında üst sınır 40rem olur, 48rem'de 48rem, 64rem'de 64rem ve böyle devam eder. Bu değerler varsayılan temadaki --breakpoint-sm (40rem), --breakpoint-md (48rem), --breakpoint-lg (64rem), --breakpoint-xl (80rem) ve --breakpoint-2xl (96rem) değişkenleriyle birebir aynıdır.

Resmî max-width sayfası bu davranışı, tamamen akışkan bir görünüm alanına uyum sağlamaya çalışmak yerine sabit bir ekran boyutları kümesi için tasarlamayı tercih edenlere yönelik olarak tanımlar. Sonuç, genişliği ekran büyüdükçe "basamak basamak" artan bir kutudur: 50rem genişliğindeki bir pencerede kutu 48rem olur, pencereyi 63rem'e kadar büyütseniz de 48rem'de kalır, 64rem'e geldiği anda 64rem'e sıçrar. Bu basamaklı genişleme container sınıfını max-w-* sınıflarından ayıran temel özelliktir.

Örnekteki iki yardımcı sınıf eksik parçaları tamamlar. mx-auto, margin-inline: auto yazar ve üst sınıra takılan kutuyu ortaya alır; px-4 de kutunun kenarlarına 1rem iç boşluk verir, böylece mobilde metin ekranın kenarına yapışmaz. Resmî sayfa bu ikisini açıkça önerir: diğer framework'lerden alışık olabileceğiniz container sınıflarının aksine Tailwind'inki kendini ortalamaz ve yatay padding içermez. Boşluk sınıflarının ayrıntısı padding ve margin yazısında.

v4'te container nasıl özelleştirilir?

Resmî yükseltme rehberi, v3'te container sınıfı için bulunan center ve padding gibi yapılandırma seçeneklerinin v4'te artık olmadığını söyler. Bunun yerine sınıfı @utility direktifiyle genişletirsiniz. Aynı adla bir @utility container bloğu yazdığınızda Tailwind kendi kuralını korur ve sizin bildirimlerinizi onun sonuna ekler. Aşağıdaki girdide resmî örneği temel aldık ve büyük ekranda padding'i artırmak için bir de @variant ekledik:

css
@import "tailwindcss";
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  @variant lg {
    padding-inline: 2rem;
  }
}
html
<div class="container">Sayfa içeriği</div>
css
@layer utilities {
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
    margin-inline: auto;
    padding-inline: 1rem;
    @media (width >= 64rem) {
      padding-inline: 2rem;
    }
  }
}

Çıktıda Tailwind'in kendi beş @media bloğu yerinde duruyor; altlarına bizim iki bildirimimiz ve @variant lg satırının dönüştüğü @media (width >= 64rem) bloğu eklenmiş. Artık HTML'de yalnızca container yazmanız yeterli: kutu her zaman ortalanır, mobilde 1rem, 64rem ve üstünde 2rem yatay padding alır. Projenin her sayfasında container mx-auto px-4 lg:px-8 yazmak yerine tek sınıf kullanmak hem HTML'i kısaltır hem de değişikliği tek bir yere toplar.

@variant direktifi, resmî functions-and-directives sayfasına göre bir Tailwind varyantını CSS'in içinde uygulamanızı sağlar; lg yerine md, dark veya başka bir varyant da yazabilirsiniz. @utility ile tamamen yeni sınıflar tanımlamanın bütün kuralları @utility direktifi yazısında, @variant ve @custom-variant ise custom variant yazısında anlatılıyor.

Kırılım noktalarını değiştirmek container'ı da değiştirir

container sınıfının basamakları temadaki --breakpoint-* değişkenlerinden türetildiği için kırılım noktası eklediğinizde ya da kaldırdığınızda sınıf da kendiliğinden güncellenir. Temaya 120rem'lik yeni bir kırılım noktası eklediğimizde altıncı bir basamak oluştu:

css
@import "tailwindcss";
@theme {
  --breakpoint-3xl: 120rem;
}
html
<div class="container">İçerik</div>
css
/* (kısaltıldı) */
    @media (width >= 96rem) {
      max-width: 96rem;
    }
    @media (width >= 120rem) {
      max-width: 120rem;
    }
  }
}

Tersine, @theme { --breakpoint-2xl: initial; } yazarak varsayılan 2xl kırılımını kaldırdığımızda container çıktısındaki son blok, yani 96rem basamağı da kayboldu ve en büyük üst sınır 80rem oldu. Bu bağlılık kullanışlıdır ama bir yan etkisi vardır: kırılım noktalarını responsive önekler için değiştirdiğinizde, farkında olmadan sayfa genişliğinizi de değiştirmiş olursunuz. Kırılım noktalarının ayrıntıları breakpoint özelleştirme yazısında, tema ad alanları @theme direktifi yazısında.

container mı, max-w-7xl mi?

container mı, max-w-7xl mi? Genişlik davranışı, Üst sınır, Ortalama, Yatay padding

Pek çok proje container yerine sabit bir üst sınır kullanır. Aşağıdaki yazım akışkan bir genişlik ve tek bir tavan verir; padding'i de ekran büyüdükçe artırır:

html
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">İçerik</div>
css
@layer theme {
  :root, :host {
    /* (kısaltıldı) */
    --spacing: 0.25rem;
    --container-7xl: 80rem;
    /* (kısaltıldı) */
  }
}
/* (kısaltıldı) */
@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  @media (width >= 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  @media (width >= 64rem) {
    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
}

Bu kutunun genişliği basamak basamak değil, sürekli değişir: 80rem'e (--container-7xl) kadar ekranla birlikte büyür, sonra durur. 50rem'lik bir pencerede kutu 50rem'in tamamını kullanır; container ise aynı pencerede 48rem'de kalırdı. Hangisinin doğru olduğu tasarıma bağlıdır:

Özellikcontainermx-auto max-w-7xl
Genişlik davranışıKırılım noktalarında basamaklıTavana kadar akışkan
Üst sınırEn büyük kırılım noktası (varsayılan 96rem)--container-7xl (80rem)
OrtalamaYok, mx-auto eklenmelimx-auto ile
Yatay paddingYok, px-* eklenmelipx-* ile
Değerin kaynağı--breakpoint-* değişkenleri--container-* değişkenleri
Özelleştirme@utility container ile eklemeBaşka bir max-w-* sınıfı veya keyfi değer

Basamaklı genişlik, tasarımcının her kırılım noktası için ayrı bir sabit genişlikte çalıştığı projelerde işinizi kolaylaştırır; ekran görüntüleri ve ölçüler her basamakta öngörülebilir olur. Akışkan genişlik ise ara boyutlardaki boş alanı kullanmak istediğinizde daha iyi sonuç verir. Eski kodlarda görebileceğiniz max-w-screen-xl gibi sınıflar da kırılım değişkenine bağlı bir tavan verir; canonicalize komutu örneğin max-w-screen-md sınıfını aynı 48rem değerine sahip max-w-3xl olarak önerdi. Boyut sınıflarının tamamı width, height ve size yazısında.

Çalışan bir örnek: tam genişlik zemin, ortalanmış içerik

Gerçek sayfalarda container çoğunlukla tek başına değil, tam genişlikte bir bölümün içinde kullanılır. Bölümün arka plan rengi ekranın bir kenarından diğerine uzanır, içerik ise ortada sınırlı bir genişlikte durur. Aşağıdaki örnekte bu kalıbı kurduk ve içine bilerek sık yapılan bir hatayı da yerleştirdik:

html
<section class="bg-slate-100 py-12">
  <div class="container mx-auto max-w-5xl px-4">İçerik</div>
</section>
css
@layer utilities {
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
}

Doğru olan kısım, rengin dış elemanda olmasıdır. bg-slate-100 (varsayılan temada oklch(96.8% 0.007 247.896)) ve py-12 tam genişlikteki section elemanına verildi; zemin ekranın tamamını kaplar. Rengi container taşıyan iç elemana verseydiniz, geniş ekranlarda renkli kutunun iki yanında boş şeritler kalırdı. Kural basit: zemin, kenarlık ve tam genişlik efektleri dış elemana, genişlik sınırı iç elemana.

Hatalı kısım iç elemandaki max-w-5xl sınıfıdır. Çıktıya bakın: .max-w-5xl kuralı .container kuralından sonra geliyor ve özgüllükleri aynı. @media blokları özgüllüğe bir şey katmadığı için max-width: var(--container-5xl), yani 64rem, her ekran boyutunda kazanır. Sonuç olarak container sınıfının basamakları hiç uygulanmaz ve eleman pratikte w-full max-w-5xl gibi davranır. İkisinden birini seçin: basamaklı genişlik istiyorsanız container mx-auto px-4, tek bir tavan istiyorsanız mx-auto max-w-5xl px-4. Aynı özelliği yazan sınıfların hangisinin kazandığını çakışan sınıflar ve important yazısında ayrıntılı ele aldık.

container ile @container karıştırılmamalı

Adları benzese de @container sınıfı bambaşka bir iş yapar: CLI çıktısında container-type: inline-size üretir ve elemanı bir kapsayıcı sorgusu (container query) bağlamı hâline getirir. Bundan sonra içindeki öğeler @sm: veya @md: gibi varyantlarla görünüm alanına değil, bu kapsayıcının genişliğine göre stil alır. container ise yalnızca genişlik ve üst sınır verir, hiçbir sorgu bağlamı oluşturmaz. İkisi aynı elemanda birlikte de kullanılabilir. Kapsayıcı sorgularının Tailwind tarafı container queries kullanımı, saf CSS tarafı CSS container queries yazısında.

Responsive önekle container

container diğer sınıflar gibi önek kabul eder. md:container yazdığımızda CLI, bütün kuralı @media (width >= 48rem) bloğunun içine taşıdı; içindeki basamaklar da bu bloğun içinde iç içe yazıldı. Mobilde hiçbir genişlik kısıtı olmayan, orta ekrandan itibaren container gibi davranan bir bölüm için kullanılabilir. Pratikte bu ihtiyaç seyrektir; çoğu sayfada öneksiz container ya da max-w-* yeterlidir. Önekli kullanımda iç içe iki koşul oluştuğunu da unutmayın: dıştaki 48rem koşulu sağlanmadan içteki basamakların hiçbiri devreye girmez, bu yüzden 40rem basamağı bu yazımda fiilen hiç görülmez. Mobil öncelikli önek mantığı responsive tasarım yazısında.

Sık yapılan hatalar

Sık yapılan hatalar: Ortalanmasını beklemek, Mobilde metnin kenara yapışması, v3 yapılandırmasını aramak, Kırılım değişikliğinin yan etkisini unutmak
  • Ortalanmasını beklemek: v4.3.5'te container ortalamaz; mx-auto ekleyin ya da @utility container ile margin-inline: auto tanımlayın.
  • Mobilde metnin kenara yapışması: sınıf padding içermez; px-4 gibi bir padding verin.
  • v3 yapılandırmasını aramak: center ve padding seçenekleri v4'te yok; ayrıntılar Tailwind CSS v4 yenilikleri yazısında.
  • Kırılım değişikliğinin yan etkisini unutmak: --breakpoint-* değerlerini değiştirmek container basamaklarını da değiştirir.
  • Aynı elemanda container ve max-w-*: max-w-* üretilen CSS içinde sonra geldiği için her ekranda kazanır ve basamaklar uygulanmaz; ikisinden birini seçin.
  • container ile @container sınıfını karıştırmak: biri genişlik verir, diğeri kapsayıcı sorgusu bağlamı oluşturur.

Sık Sorulan Sorular

Tailwind container neden ortalanmıyor?

Resmî max-width sayfasına göre Tailwind'in container sınıfı kendini otomatik olarak ortalamaz. container mx-auto yazın ya da sınıfı @utility container { margin-inline: auto; } ile genişletin.

container genişlikleri nelerdir?

Varsayılan temada width: 100% ile başlar ve 40rem, 48rem, 64rem, 80rem ve 96rem kırılımlarında max-width değerini aynı sayıya eşitler. Kök yazı boyutu 16px iken bunlar 640px, 768px, 1024px, 1280px ve 1536px eder.

container'a varsayılan padding nasıl eklenir?

CSS dosyanızda @utility container { padding-inline: 1rem; } tanımlayın. Ekran boyutuna göre farklı padding için bloğun içine @variant lg { padding-inline: 2rem; } gibi varyantlar ekleyebilirsiniz.

container sınıfının en büyük genişliğini nasıl değiştiririm?

Basamaklar kırılım noktalarından geldiği için en büyük değeri değiştirmenin yolu --breakpoint-* değişkenleridir: en büyük kırılımı kaldırmak ya da yeni bir kırılım eklemek son basamağı değiştirir. Ancak bu responsive öneklerinizi de etkiler. Yalnızca sayfa genişliğini sınırlamak istiyorsanız kırılımlara dokunmak yerine max-w-* yaklaşımına geçmek daha az yan etki getirir.

container hangi CSS katmanında üretilir?

Derlenen çıktıda .container kuralı diğer yardımcı sınıflar gibi @layer utilities içinde yer alır. Bu yüzden @layer components içinde yazdığınız bir kural onu ezemez; ona ekleme yapmak için @utility container kullanılır. Katman sırasının mantığı layer katmanları ve özel CSS yazısında anlatılıyor.

container yerine ne kullanabilirim?

Akışkan bir genişlik ve tek bir tavan istiyorsanız mx-auto max-w-7xl px-4 gibi bir yazım kullanın. max-w-* değerleri --container-* tema değişkenlerinden gelir.

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 · width, height ve size · breakpoint özelleştirme · @utility direktifi · container queries · sayfa düzeni