Tailwind Breakpoint Özelleştirme: max-*, Aralıklar ve --breakpoint-* Değişkenleri

max-* varyantları: bir değerin altını hedeflemek

Her varsayılan kırılma noktası için Tailwind bir de max-* varyantı üretir. Bu varyantlar "bu genişliğin altında" anlamına gelir ve medya sorgusunda katı küçüktür (<) işaretini kullanır. Yani max-md: 48rem'in altında geçerlidir, tam 48rem genişlikte artık geçerli değildir; bu sayede md: ile çakışmaz.

Tek başına max-* kullanmak da mümkündür. Örneğin bir yan menüyü yalnızca dar ekranlarda gizlemek için max-md:hidden yazabilirsiniz. Ancak mobile-first yaklaşımda çoğu durumda öneksiz sınıf ve geniş ekran öneki daha okunur bir sonuç verir: max-md:hidden yerine hidden md:block de aynı işi görür, fark yalnızca öğenin 48rem ve üstündeki display değerinin açıkça yazılıp yazılmamasıdır.

max-* kuralları neden büyükten küçüğe sıralanır?

Önekli kurallar küçükten büyüğe dizilirken max-* kuralları ters yönde, büyük değerden küçüğe doğru dizilir. Bunu görmek için max-sm:p-2 max-md:p-3 max-lg:p-4 sınıflarını birlikte derledik.

/* (kısaltıldı) */
@layer utilities {
  @media (width < 64rem) {
    .max-lg\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
  }
  @media (width < 48rem) {
    .max-md\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }
  @media (width < 40rem) {
    .max-sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }
  }
}

Bu sıralamanın mantığı, mobile-first sistemin aynasıdır. 30rem genişliğinde bir ekranda üç sorgu da doğrudur; en sonda duran max-sm kuralı kazanır ve iç boşluk 0.5rem olur. 45rem genişlikte yalnızca max-lg ve max-md doğrudur, sonra gelen max-md kazanır. 60rem genişlikte yalnızca max-lg kalır. Yani hangi genişlikte olursanız olun, size en yakın (en dar) üst sınır kazanır. Bu yüzden max-* varyantlarıyla yukarıdan aşağı, yani masaüstünden mobile doğru bir tasarım da kurabilirsiniz; yine de resmî belge mobile-first yolu önerir ve iki yaklaşımı aynı öğede karıştırmak okunabilirliği düşürür.

Aralık hedefleme: md:max-xl ve md:max-lg

Resmî sayfaya göre bir aralığı hedeflemek için bir kırılma noktası varyantını bir max-* varyantıyla yığarsınız. Tek bir kırılma noktasını hedeflemek için ise o kırılma noktasını, bir sonrakinin max-* varyantıyla birleştirirsiniz: md'den sonra lg geldiği için "yalnızca md" demek md:max-lg: yazmaktır.

<div class="hidden md:max-lg:block"></div>
<div class="max-md:hidden"></div>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  .hidden {
    display: none;
  }
  @media (width < 48rem) {
    .max-md\:hidden {
      display: none;
    }
  }
  @media (width >= 48rem) {
    @media (width < 64rem) {
      .md\:max-lg\:block {
        display: block;
      }
    }
  }
}

Yığılmış varyant iç içe iki medya sorgusuna dönüşür: dışta width >= 48rem, içte width < 64rem. Tarayıcı iki koşul da doğruysa kuralı uygular, yani ilk div yalnızca 48rem ile 64rem arasında görünür. Bu kombinasyonu bir kez yazdığınızda ayrıca bir ayar yapmanız gerekmez; derleyici kaynakta gördüğü her kırılma noktası ve max-* çiftini üretir.

Sıra konusunda bir ayrıntı: v4'te yığılmış varyantlar soldan sağa uygulanır, dolayısıyla sm:max-md:p-1 ile max-md:sm:p-2 farklı sınıf adlarıdır ve CSS'te dış ve iç sorgunun yeri yer değiştirir. İki medya koşulunun "ve" ile birleştiği bu durumda sonuç aynı aralıktır, ama tutarlılık için resmî sayfadaki gibi önce alt sınırı (md:), sonra üst sınırı (max-lg:) yazmak en anlaşılır yoldur.

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

Yukarıdaki çıktı @source inline("sm:max-md:p-1 max-md:sm:p-2") girdisinin v4.3.5 ile derlenmiş hâlidir (yalnızca utilities katmanı). Sorguların yeri değişse de iki kural aynı 40rem ile 48rem aralığında geçerlidir. Aynı öğede ikisini birden kullanırsanız sonradan gelen .sm\:max-md\:p-1 kazanır; bu da HTML sırasının değil CSS sırasının belirleyici olduğunu bir kez daha gösterir.

Keyfi kırılma noktaları: min-[...] ve max-[...]

Bir tasarımda yalnızca bir yerde gereken bir genişlik için temaya değişken eklemek zorunda değilsiniz. min-[...] ve max-[...] varyantları köşeli parantez içine yazdığınız değeri doğrudan medya sorgusuna koyar.

<div class="max-[600px]:bg-sky-300 min-[320px]:text-center"></div>

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  @media (width < 600px) {
    .max-\[600px\]\:bg-sky-300 {
      background-color: var(--color-sky-300);
    }
  }
  @media (width >= 320px) {
    .min-\[320px\]\:text-center {
      text-align: center;
    }
  }
}

Keyfi değerler de diğer varyantlarla yığılabilir: min-[30rem]:max-[50rem]:p-3 derlendiğinde @media (width >= 30rem) içinde @media (width < 50rem) üretir. Burada --color-sky-300 değişkeninin değeri oklch(82.8% 0.111 230.318)'dir. Köşeli parantez sözdiziminin genel kuralları (alt çizginin boşluk olması, tür ipuçları) Tailwind arbitrary values yazısında anlatılıyor. Aynı keyfi değeri birkaç yerde tekrar ediyorsanız bu, onu temaya taşımanın zamanı geldiğinin işaretidir.

Özel kırılma noktası eklemek ve değiştirmek

Kırılma noktaları --breakpoint- ad alanındaki tema değişkenleridir. @theme bloğunda yeni bir ad tanımlarsanız aynı adla bir önek oluşur; var olan bir adı yeniden tanımlarsanız değeri değişir. Resmî sayfadaki örnek iki yeni ad ekler ve 2xl değerini büyütür.

@import "tailwindcss" source(none);
@source inline("xs:grid-cols-2 2xl:grid-cols-4 3xl:grid-cols-6");

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  @media (width >= 30rem) {
    .xs\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 100rem) {
    .\32 xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (width >= 120rem) {
    .\33 xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
}

Üç şey dikkat çekiyor. xs yeni bir ad olmasına rağmen 30rem değeri sayesinde doğru yere, en başa sıralanmıştır. 2xl artık 96rem değil 100rem'de devreye girer. 3xl ise rakamla başladığı için seçicide \33 kaçışıyla görünür. Yeni bir kırılma noktası eklediğinizde max-xs: gibi karşılık gelen max-* varyantı da kullanılabilir hâle gelir. Tema değişkenlerinin genel yapısı ve diğer ad alanları Tailwind @theme direktifi yazısında.

Bir kırılma noktasını silmek veya hepsini sıfırlamak

Kullanmadığınız bir kırılma noktasını kaldırmak için değerini initial yaparsınız. Aşağıdaki girdide --breakpoint-2xl: initial; tanımlandıktan sonra 2xl:p-4, xl:p-2 ve max-2xl:p-1 sınıfları derlendi.

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

Çıktıda yalnızca xl:p-2 vardır. 2xl:p-4 ve max-2xl:p-1 için hiçbir kural üretilmedi ve CLI bir hata ya da uyarı da yazmadı. Bu sessizlik önemlidir: bir kırılma noktasını silerseniz, onu kullanan eski sınıflar projede kalır ama hiçbir şey yapmaz. Silmeden önce kaynak dosyalarda o önekin geçip geçmediğini aramak iyi bir alışkanlıktır.

Varsayılanların tamamını bırakıp kendi adlarınızı kullanmak için önce --breakpoint-*: initial; ile ad alanını boşaltır, ardından kendi değişkenlerinizi tanımlarsınız.

@import "tailwindcss" source(none);
@source inline("tablet:p-4 laptop:p-8 md:p-2");

@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
}

v4.3.5 ile derlenen CSS:

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

tablet: ve laptop: öneklerini kullanabilirsiniz, ama md:p-2 artık hiçbir şey üretmez: sıfırlama sonrası md adı yoktur. Bir projeyi varsayılan adlardan özel adlara taşırken bütün sm:, md:, lg: kullanımlarını da değiştirmeniz gerekir; aksi hâlde düzen sessizce bozulur.

Birim karışıklığı: neden hep rem kullanmalı?

Resmî sayfa kırılma noktalarında tek bir birim kullanılmasını, varsayılanlar rem olduğu için eklenen değerlerin de rem olmasını önerir; aksi hâlde üretilen sınıfların beklenmedik bir sırayla dizilebileceğini ve birbirini beklenmedik şekilde ezebileceğini söyler. Bunun somut olarak ne demek olduğunu görmek için 640px ile 768px arasında kalan 700px değerinde bir kırılma noktası tanımladık.

@import "tailwindcss" source(none);
@source inline("ara:p-1 sm:p-2 md:p-3");

@theme {
  --breakpoint-ara: 700px;
}

v4.3.5 ile derlenen CSS:

/* (kısaltıldı) */
@layer utilities {
  @media (width >= 700px) {
    .ara\:p-1 {
      padding: var(--spacing);
    }
  }
  @media (width >= 40rem) {
    .sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }
  }
  @media (width >= 48rem) {
    .md\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }
}

Değer olarak 700px, 16px kökte 40rem'den (640px) büyüktür; yine de ara bloğu sm bloğunun önüne yerleştirildi. Bir öğede ara:p-1 sm:p-2 birlikte kullanılırsa, 700px ve üstünde iki sorgu da doğrudur ve sonra gelen sm:p-2 kazanır. Yani daha geniş kırılma noktası için yazdığınız stil hiçbir genişlikte görünmez. Aynı değeri --breakpoint-ara: 43.75rem; olarak yazınca sıralama düzeldi ve blok sm ile md arasına yerleşti. Kuralı basit tutun: kırılma noktalarını her zaman rem ile yazın.

Kırılma noktasını kendi CSS'inizde kullanmak

Utility sınıfı yerine kendi yazdığınız bir kuralda da aynı kırılma noktasını kullanmak isteyebilirsiniz. Medya sorgularında CSS değişkeni kullanılamadığı için upgrade guide burada theme() fonksiyonunu değişken adıyla kullanmayı gösterir. Aşağıdaki kuralı derledik.

@import "tailwindcss" source(none);
@source "./ornek.html";

@layer components {
  .yan-menu {
    display: none;
    @media (width >= theme(--breakpoint-lg)) {
      display: block;
    }
  }
}

v4.3.5 ile derlenen CSS (components katmanı):

/* (kısaltıldı) */
@layer components {
  .yan-menu {
    display: none;
    @media (width >= 64rem) {
      display: block;
    }
  }
}

theme(--breakpoint-lg) derleme sırasında 64rem değerine çevrildi; böylece kırılma noktasını temada değiştirdiğinizde bu kural da güncellenir. Normal derlemede iç içe yazım korunur. Aynı dosyayı --minify ile derlediğimizde ise çıktı düzleşip .yan-menu{display:none}@media (min-width:64rem){.yan-menu{display:block}} hâline geldi. theme() ve benzeri fonksiyonlar Tailwind --spacing() ve --alpha() fonksiyonları yazısında, kendi CSS'inizi hangi katmana yazacağınız Tailwind katmanları ve özel CSS yazısında anlatılıyor.

Hangi yöntemi ne zaman seçmeli?

Son satır bu yazının kapsamı dışında: öğeyi pencereye değil kapsayıcısına göre biçimlendirmek için Tailwind container queries yazısına bakın. Kapsayıcı boyutlarının ad alanı (--container-*) kırılma noktalarından ayrıdır ve değerleri farklıdır.

Sık Sorulan Sorular

Tailwind'de sadece tablet boyutu nasıl hedeflenir?

Varsayılan adlarla tablet aralığını md olarak kabul ederseniz md:max-lg: yazarsınız; bu 48rem ile 64rem arasında geçerlidir. Kendi tanımınız farklıysa keyfi min-[...]:max-[...]: kombinasyonu ya da tema değişkeni kullanabilirsiniz.

Masaüstünden mobile doğru (desktop-first) yazabilir miyim?

Teknik olarak evet: öneksiz sınıfları masaüstü için yazıp dar ekranları max-lg:, max-md:, max-sm: ile düzeltebilirsiniz ve derleyici bu kuralları doğru sırada üretir. Ancak resmî responsive design sayfası mobile-first yolu anlatır ve skill'deki örnekler de o yöndedir; ekip içinde tek bir yön seçmek sınıf listelerini okunur tutar.

Keyfi kırılma noktası mı, tema değişkeni mi?

İkisi de aynı biçimde medya sorgusu üretir; fark bakımdadır. min-[700px]: gibi bir değer yalnızca yazıldığı yerde geçerlidir ve değiştirmek için her kullanımı bulmanız gerekir. @theme içindeki bir --breakpoint-* değişkeni ise tek bir yerden yönetilir, otomatik olarak bir max-* karşılığı da kazanır ve ekipteki herkes aynı adı kullanır. Bir değeri ikinci kez yazdığınız anda temaya taşımak genellikle daha az hata demektir.

max-md ile md neden çakışmıyor?

max-md sorgusu width < 48rem, md sorgusu width >= 48rem üretir. Tam 48rem genişlikte yalnızca ikincisi doğrudur, bu yüzden iki kural aynı anda geçerli olmaz.

v3'teki screens ayarı v4'te nereye gitti?

v4'te kırılma noktaları CSS içindeki @theme bloğunda --breakpoint-* değişkenleriyle tanımlanır. Eski yapılandırma dosyasından geçişin genel hikâyesi Tailwind CSS v4 yenilikleri yazısında.

Sildiğim kırılma noktasını kullanan sınıflar hata verir mi?

Hayır. Denememizde --breakpoint-2xl: initial; sonrası 2xl:p-4 için ne kural üretildi ne de uyarı yazıldı. Bu tür sessiz sorunların teşhisi Tailwind class çalışmıyor: sık hatalar 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 · Responsive tasarım: sm, md, lg · Container queries · @theme direktifi · Arbitrary values · Mobil uyumluluk nedir