Tailwind Renk Opaklığı: bg-black/50 Modifier ve opacity-* Sınıfı

Eğik çizgi modifier'ı nasıl çalışır

Renk alan her Tailwind sınıfı (bg-, text-, border-, decoration-, fill- ve diğerleri) bir saydamlık modifier'ı da alabilir. Sınıf adının sonuna / ve bir sayı eklemeniz yeterlidir. Sayı yüzde olarak yorumlanır: /50 yüzde 50, /75 yüzde 75 anlamına gelir. Aşağıdaki sınıfları v4.3.5 ile derledik:

<div class="bg-black/50"></div>
<p class="text-white/80">Yarı saydam metin</p>
<div class="bg-sky-500/33"></div>

v4.3.5 ile derlenen CSS:

.bg-black\/50 {
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
}
.bg-sky-500\/33 {
  background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 33%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-500) 33%, transparent);
  }
}
.text-white\/80 {
  color: color-mix(in srgb, #fff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}

Bu çıktıyı satır satır okumak modifier'ın mantığını anlamayı kolaylaştırır. Her kuralda iki bildirim var. İlki, rengin değeri doğrudan yazılmış bir color-mix(in srgb, ...) ifadesidir; burada tema değişkeni yerine #000 veya oklch(68.5% 0.169 237.323) gibi somut değer kullanılır. İkincisi, @supports koşulu içinde, tema değişkenine başvuran color-mix(in oklab, ...) ifadesidir. Koşul, tarayıcının color-mix() içinde lab renk uzayını tanıyıp tanımadığını sınar. Tanıyorsa ikinci bildirim birinciyi ezer; tanımıyorsa ilk bildirim geçerli kalır. Tarayıcı gereksinimleri konusunda kesin bilgi için resmî uyumluluk sayfasına bakmanız gerekir; biz burada yalnızca derleyicinin iki kademeli bir çıktı ürettiğini gösteriyoruz.

Her iki bildirimde de karışımın ikinci rengi transparent'tır. Yani "%50 siyah, %50 saydam" karışımı, alfa değeri yarıya inmiş bir siyah verir. Bu, rengin kendisini değiştirmez; arkasındaki içerik görünür hale gelir. Elemanın metni, kenarlığı veya çocukları bu işlemden etkilenmez, çünkü kural yalnızca background-color özelliğine yazılır.

Hangi sayılar geçerli: tam sayı, ondalık ve keyfi değer

Resmî arka plan sayfasının örnekleri /100, /75, /50 gibi yuvarlak sayılar kullanır, fakat v4.3.5 bunlarla sınırlı değil. Denemelerimizde /33 gibi herhangi bir tam sayı çalıştı. Ondalık sayılarda ise bir sınır gördük: bg-black/2.5, bg-black/3.25, bg-black/3.75 ve bg-black/12.5 kural üretti, ama bg-black/3.3 hiçbir çıktı vermedi. Denediğimiz değerlere göre ondalıklar çeyrek adımlarla (.25, .5, .75) kabul ediliyor; bunun dışındaki bir ondalık hata vermeden yok sayılan bir sınıf oluyor.

Herhangi bir değeri kesin vermek istiyorsanız köşeli parantez kullanırsınız. Resmî sayfadaki örnek bg-pink-500/[71.37%] biçimindedir; köşeli parantez içinde .37 gibi 0 ile 1 arası bir sayı da yazabilirsiniz. Değeri çalışma anında değiştirmek istiyorsanız normal parantezle bir CSS değişkeni verirsiniz: bg-cyan-400/(--alfa).

<div class="bg-pink-500/[71.37%]"></div>
<div class="bg-black/[.37]"></div>
<div class="bg-cyan-400/(--alfa)" style="--alfa: 40%"></div>

v4.3.5 ile derlenen CSS:

.bg-black\/\[\.37\] {
  background-color: color-mix(in srgb, #000 37%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 37%, transparent);
  }
}
.bg-cyan-400\/\(--alfa\) {
  background-color: oklch(78.9% 0.154 211.53);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-400) var(--alfa), transparent);
  }
}
.bg-pink-500\/\[71\.37\%\] {
  background-color: color-mix(in srgb, oklch(65.6% 0.241 354.308) 71.37%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-pink-500) 71.37%, transparent);
  }
}

İki ayrıntı dikkat çekici. [.37] yazdığımızda derleyici değeri 37% olarak çevirdi; yani 0 ile 1 arasındaki sayıyı yüzdeye dönüştürdü. CSS değişkenli sürümde ise ilk bildirim saydamlık içermiyor: background-color: oklch(78.9% 0.154 211.53). Değişkenin değeri derleme anında bilinmediği için yedek bildirim rengi tam opak yazıyor, saydamlık yalnızca @supports içindeki color-mix() satırında uygulanıyor. Bu, değişkenli modifier'ın yedek yolda saydam görünmeyeceği anlamına gelir.

Bir de tutarlılık için canonicalize komutunun önerisine bakalım. bg-black/[.5] ve bg-black/[50%] yazımları için CLI'nin verdiği kanonik ad bg-black/50 oldu. Yani hazır bir tam sayı karşılığı olan keyfi değeri köşeli parantezle yazmak gereksizdir. CLI komutlarının kullanımı standalone CLI yazısında anlatılıyor.

tailwindcss canonicalize "bg-black/[.5]" "bg-black/[50%]"
# bg-black/50
# bg-black/50

Kendi renkleriniz ve keyfi renkler de modifier alır

Modifier yalnızca varsayılan palette çalışmaz. @theme içinde tanımladığınız bir renk ve köşeli parantezle verdiğiniz bir hex değeri de saydamlaştırılabilir. Aşağıdaki girişte --color-marka: #5b21b6 tanımladık:

.bg-marka\/40 {
  background-color: color-mix(in srgb, #5b21b6 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-marka) 40%, transparent);
  }
}
.bg-\[\#1da1f2\]\/25 {
  background-color: color-mix(in oklab, #1da1f2 25%, transparent);
}

Keyfi hex renkte @supports bloğu oluşmadı; derleyici yalnızca tek bir color-mix(in oklab, ...) satırı yazdı. Tema rengi ise yine iki kademeli çıktı aldı. Kenarlık için border-current/20 da geçerlidir: o durumda ilk bildirim düz border-color: currentcolor olur, saydamlık @supports içindeki karışımda uygulanır. Yani metin rengine bağlı, hafif bir ayırıcı çizgiyi tek sınıfla elde edebilirsiniz.

opacity-* sınıfı: elemanın tamamını soluklaştırmak

opacity- sınıfları CSS opacity özelliğini yazar. Resmî sayfaya göre opacity-<sayı> değeri yüzde olarak kullanır; keyfi değer için opacity-[.67], değişken için opacity-(--saydam) yazılır. Derleme çıktısı şöyle:

.opacity-0 {
  opacity: 0%;
}
.opacity-33 {
  opacity: 33%;
}
.opacity-50 {
  opacity: 50%;
}
.opacity-\[\.67\] {
  opacity: .67;
}
.opacity-\(--saydam\) {
  opacity: var(--saydam);
}
.disabled\:opacity-50:disabled {
  opacity: 50%;
}

Fark, kuralın hangi özelliğe yazıldığında yatıyor. Renk modifier'ı tek bir renk değerini değiştirir; opacity ise elemanın kendisine uygulanır ve eleman içindeki her şey, metin, kenarlık, resim ve çocuk elemanlar dahil, birlikte soluklaşır. Bu nedenle iki sınıf birbirinin yerine kullanılamaz. Aşağıdaki iki kalıbı karşılaştırın:

<div class="relative">
  <img src="/kapak.jpg" alt="">
  <div class="absolute inset-0 bg-black/50"></div>
  <h2 class="relative text-white">Kapak başlığı</h2>
</div>

<div class="bg-white opacity-50">
  <h2 class="text-gray-900">Tüm kart soluk</h2>
</div>

İlk kalıpta resmin üzerine yerleştirilen perde yalnızca yarı saydam siyah bir zemindir; başlık ayrı bir eleman olduğu ve kendi rengini taşıdığı için tam beyaz kalır. İkinci kalıpta ise opacity: 50% kartın tamamına uygulanır, başlık da yarı saydam görünür. Konumlandırma sınıfları (relative, absolute, inset-0) position yazısında anlatılıyor.

opacity sınıfları durum varyantlarıyla iyi anlaşır. Resmî sayfadaki disabled:opacity-75 örneği, devre dışı bir alanın tamamını soluk göstermenin en kısa yoludur. Görünürlük geçişleri için opacity-0 ile opacity-100 arasında yalnızca opaklığı canlandıran transition-opacity sınıfını kullanabilirsiniz; geçiş sınıfları transition yazısında anlatılıyor.

Uygulamalı örnek: saydam uyarı kutusu mu, açık ton mu?

Hafif renkli bir uyarı kutusu yapmak için iki yol vardır. Birincisi paletin açık tonunu kullanmaktır: bg-red-50. İkincisi orta tonu düşük saydamlıkla kullanmaktır: bg-red-500/10. Kâğıt üzerinde ikisi de "çok açık kırmızı" gibi görünür, ama davranışları farklıdır. Aşağıdaki iki kutuyu derledik:

<div class="border border-red-500/20 bg-red-500/10 text-red-700">Ödeme alınamadı.</div>
<div class="bg-red-50 text-red-700">Ödeme alınamadı.</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-red-500\/20 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
}

bg-red-50 tam opak bir renktir; değeri oklch(97.1% 0.013 17.38) ve kutunun altında ne olursa olsun aynı görünür. bg-red-500/10 ise yüzde 90 saydam bir kırmızıdır; altındaki zemin beyazsa açık pembe, koyu griyse koyu ve hafif kırmızımsı bir ton verir. Bu özellik koyu ve açık temada aynı sınıfı kullanabilmenizi sağlar: tek bir bg-red-500/10 her iki zeminde de "zeminin biraz kırmızılaşmış hali" gibi davranır, oysa bg-red-50 koyu temada parlak bir kutu olarak kalır ve ayrıca dark: sınıfı gerektirir. Öte yandan opak ton, altındaki içerikten bağımsız ve öngörülebilir bir sonuç verdiği için metin kontrastını ölçmek daha kolaydır.

Kenarlıkta da aynı mantık işler. border-red-500/20, zeminle birlikte tonu değişen yumuşak bir çizgi verir. Bu tür bir kenarlığı tam opak bir tonla (border-red-200 gibi) yapmak da mümkündür; seçim, bileşenin farklı zeminlerde kullanılıp kullanılmayacağına bağlıdır. Hazır bileşen kalıplarının tamamı kart, buton ve input örnekleri yazısında bulunuyor.

Kendi CSS'inizde saydam tema rengi: --alpha()

Tailwind sınıfı kullanmadığınız bir kuralda da tema rengini saydam yazmak isteyebilirsiniz. Resmî renk sayfası bunun için --alpha() fonksiyonunu gösterir. Fonksiyon derleme sırasında, modifier'ın ürettiğiyle aynı yapıya çevrilir:

.perde {
  background-color: --alpha(var(--color-gray-950) / 10%);
}

v4.3.5 ile derlenen CSS:

.perde {
  background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-gray-950) 10%, transparent);
  }
}

Böylece elle color-mix() yazmak zorunda kalmaz, sınıflarla birebir aynı yedekleme davranışını elde edersiniz. --alpha() ve --spacing() gibi derleme zamanı fonksiyonlarının tamamı fonksiyonlar yazısında anlatılıyor.

Eğik çizgi her yerde saydamlık demek değil

Tailwind sınıf adlarında / işaretinin genel adı modifier'dır ve anlamı sınıfa göre değişir. Renk sınıflarında saydamlık anlamına gelir, ama yazı boyutu sınıflarında satır yüksekliği anlamına gelir. Aynı derleyiciyle iki sınıfı karşılaştırın: text-white/80 için çıktı color: color-mix(in oklab, var(--color-white) 80%, transparent) olurken text-sm/6 için çıktı font-size: var(--text-sm) ve line-height: calc(var(--spacing) * 6) olur. Yani text- öneki aynı olsa bile, ardından gelen değer bir renkse eğik çizgi alfa, bir boyutsa satır yüksekliği belirtir. Yazı boyutu tarafı font-size yazısında anlatılıyor.

Sınıf adındaki parçaların sırası da sabittir: önce varyantlar iki nokta üst üste ile ayrılarak gelir, sonra özellik ve değer, en sonda modifier. md:hover:bg-black/50 doğru bir yazımdır; modifier'ı varyantların önüne veya rengin ortasına koyamazsınız. Sınıf adının bu anatomisi utility class mantığı yazısında ayrıntılı biçimde ele alınıyor.

Hover ve dark ile birleştirmek

Modifier, varyant önekleriyle sorunsuz birleşir. hover:bg-sky-500/90 yazdığımızda derleyici kuralı @media (hover: hover) içine yerleştirdi ve yine iki kademeli yapı kurdu:

@media (hover: hover) {
  .hover\:bg-sky-500\/90:hover {
    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 90%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-sky-500\/90:hover {
      background-color: color-mix(in oklab, var(--color-sky-500) 90%, transparent);
    }
  }
}

Aynı şey koyu tema için de geçerli: dark:bg-gray-900/50 derlendiğinde kural @media (prefers-color-scheme: dark) içine girdi ve color-mix(in oklab, var(--color-gray-900) 50%, transparent) değerini aldı. Varyantların ayrıntısı hover ve focus yazısında, koyu tema kurulumu dark mode yazısında anlatılıyor.

Sık yapılan hatalar

• v3 sınıflarını kullanmak: bg-opacity-50 veya text-opacity-50 v4.3.5 ile kural üretmez; @apply içinde kullanırsanız derleme Cannot apply unknown utility class `bg-opacity-50` hatasıyla durur. Doğru yazım bg-black/50 biçimidir. Sürüm geçişi için Tailwind v4 yenilikleri yazısına bakın.
• Yazıyı soluklaştırmak istemezken opacity kullanmak: Bir kartın zeminini hafifletmek için opacity-50 yazarsanız içindeki metin de soluklaşır. Zemin için bg-white/50 kullanın.
• Geçersiz ondalık: /3.3 gibi çeyrek adım olmayan bir ondalık sessizce yok sayılır. Ya tam sayı ya da /[3.3%] gibi keyfi değer yazın.
• Değişkenli modifier'da yedek yolu unutmak: /(--alfa) biçiminde yedek bildirim tam opak renk yazar; saydamlığın kritik olduğu yerlerde bu farkı göz önünde bulundurun.

Sık Sorulan Sorular

bg-black/50 ile bg-black opacity-50 aynı şey mi?

Hayır. İlki yalnızca arka plan renginin alfa değerini yarıya indirir. İkincisi elemanın tamamına opacity: 50% uygular ve içindeki her şeyi soluklaştırır.

Modifier hangi sınıflarda çalışır?

Renk değeri alan sınıflarda: denemelerimizde bg-, text-, border- ve decoration- önekleri modifier ile kural üretti. Resmî renk sayfası da modifier'ı tüm renk sınıfları için tanımlar. Gölge ve halka renklerinde de aynı eğik çizgi yazımı kullanılır; ayrıntısı shadow ve ring yazısında.

Saydamlığı JavaScript ile değiştirebilir miyim?

Evet, bg-cyan-400/(--alfa) gibi değişkenli bir sınıf kullanıp --alfa değişkenini satır içi stil veya betikle güncelleyebilirsiniz. Sınıf adını çalışma anında birleştirmek ise işe yaramaz, çünkü derleyici yalnızca kaynak dosyalarda tam olarak geçen sınıfları üretir.

Derlenen CSS'te neden iki ayrı background-color satırı var?

İlk satır somut renk değeriyle yazılmış bir yedektir, ikincisi @supports koşulu sağlandığında devreye giren ve tema değişkenine başvuran asıl satırdır. Tema değişkenine bağlı satır sayesinde, örneğin bir bölümde --color-sky-500 değişkenini CSS ile başka bir değere ezerseniz saydam sürüm de o yeni değeri izler; yedek satır ise koşulu sağlamayan ortamlarda rengin hiç kaybolmamasını hedefler.

opacity-33 gibi ara değerler var mı?

Evet. v4.3.5 ile opacity-33 derlendi ve opacity: 33% verdi; opacity-2.5 ve opacity-12.25 de çalıştı.

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 · Renk paleti · Dark mode · --alpha() ve --spacing() · Blur ve filtreler · CSS renk değerleri