Tailwind CSS Container Yapısı ve İçerik Ortalama

Web sitelerinde içeriğin (yazılar, görseller) ekranın bir ucundan diğer ucuna yayılmasını istemeyiz. İçeriği genellikle ekranın ortasında, okunabilir bir genişlikte tutmak isteriz. Buna Container (Kapsayıcı) yapısı denir.

Tailwind CSS v4.0 ile birlikte bu yapı hem çok daha performanslı hem de yönetimi çok daha kolaydır. Artık JavaScript ayar dosyalarıyla değil, doğrudan CSS gücüyle çalışacağız.

1. Container Nedir ve Nasıl Çalışır?

container sınıfı, elemanın genişliğini (max-width) o anki ekran boyutuna (breakpoint) göre sabitler. Siz ekranı büyüttükçe container akışkan bir şekilde büyümez; belirli adımlarla (responsive olarak) genişler.

Container Genişlik Mantığı:

• Mobilde (< 640px): %100 genişliktedir (Ekranı kaplar).
• sm (640px): Genişliği 640px'e sabitlenir.
• md (768px): Genişliği 768px'e sabitlenir.
• lg, xl, 2xl: Ekran büyüdükçe container da genişler ancak kenarlarda boşluk bırakır.

2. Container'ı Ortalamak (mx-auto)

En sık yapılan hata şudur: Sadece container sınıfını kullanmak. Eğer sadece container yazarsanız, genişlik sabitlenir ancak kutu sola yapışık kalır.

Kutuyu sayfanın ortasına getirmek için margin-x auto anlamına gelen mx-auto sınıfını mutlaka eklemelisiniz.

<div class="container bg-red-200">
  İçerik solda duruyor.
</div>

<div class="container mx-auto bg-green-200">
  İçerik sayfanın ortasında ve düzenli.
</div>

3. Kenar Boşlukları (Padding) Eklemek

container sınıfı mobilde %100 genişliğe sahiptir. Bu da mobildeyken yazılarınızın telefon ekranının kenarlarına yapışmasına neden olur. Bunu engellemek için px (padding-x) ekleriz.

<div class="container mx-auto px-4">
  <p>Artık mobildeyken yazılarım ekranın kenarına yapışmıyor.</p>
</div>

4. v4.0 Özelliği: CSS Dosyasından Global Ayar Yapmak

Eskiden tailwind.config.js dosyasıyla yaptığımız ayarları artık doğrudan CSS dosyamızda yapıyoruz.

Eğer her defasında mx-auto ve px-4 yazmak istemiyorsanız, ana CSS dosyanızda (Tailwind'i import ettiğiniz dosya) container sınıfını varsayılan olarak güncelleyebilirsiniz.

Tailwind v4.0'da bunu yapmak için standart CSS sözdizimini kullanmak yeterlidir:

Dosya: input.css (veya style.css)

@import "tailwindcss";

/* Tailwind v4.0'da Container'ı özelleştirme.
  Artık config dosyası yok, her şey CSS!
*/

@layer utilities {
  .container {
    @apply mx-auto px-4; 
    /* Bu kod sayesinde .container yazdığınız her yer
       otomatik olarak ortalanır ve 1rem (px-4) boşluk alır. */
  }
}

Bu ayarı yaptıktan sonra HTML tarafında sadece şunu yazmanız yeterli olur:

<div class="container">
 </div>

5. w-full ile container Farkı

• w-full: Her zaman ekranın %100'ünü kaplar. (Örn: Navbar arka plan rengi, Footer şeridi).
• container: İçeriği sınırlar ve ortada tutar.

Örnek Senaryo: Arka planı boydan boya renkli, ama içeriği ortada duran bir bölüm (Section) yapalım.

<div class="w-full bg-blue-600 py-10">
  
  <div class="container mx-auto text-white">
    <h1 class="text-3xl font-bold">Merhaba v4.0</h1>
    <p>Arka plan boydan boya, ama içerik güvenli alanda.</p>
  </div>

</div>