Tailwind Arbitrary Values: Tema Dışı Değerler Nasıl Yazılır?

Temel kullanım: köşeli parantez

Resmî belge keyfi değerleri, tasarım sisteminin dışına çıkmanız gereken ve değerin tam olarak belli olduğu durumlar için tanıtır; örneğin bir arka plan resmini piksel hassasiyetinde konumlamak. Davranış inline style'a benzer, ama sınıf olduğu için varyant alabilir. Aşağıdaki HTML dosyasını derledik:

<div class="top-[117px] lg:top-[344px] bg-[#bada55] text-[22px] grid-cols-[1fr_500px_2fr]"></div>

v4.3.5 ile derlenen CSS (aynı derlemedeki diğer satırların kuralları sonraki bölümlerde gösterilecek):

/* (kısaltıldı) */
@layer utilities {
  .top-\[117px\] {
    top: 117px;
  }
  .grid-cols-\[1fr_500px_2fr\] {
    grid-template-columns: 1fr 500px 2fr;
  }
  .bg-\[\#bada55\] {
    background-color: #bada55;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  @media (width >= 64rem) {
    .lg\:top-\[344px\] {
      top: 344px;
    }
  }
}

Değerler hiçbir tema değişkeninden geçmeden doğrudan yazıldı: top: 117px, background-color: #bada55. lg: öneki, keyfi değerli sınıfı da @media (width >= 64rem) bloğuna aldı. grid-cols-[1fr_500px_2fr] içindeki alt çizgiler boşluğa döndü ve geçerli bir grid-template-columns değeri oluştu. Seçicilerde köşeli parantezlerin, diyez işaretinin ve diğer özel karakterlerin ters eğik çizgiyle kaçışlandığına dikkat edin; HTML tarafında bu kaçışları yazmazsınız.

Bir ayrıntı daha: text-[22px] yazı boyutu üretti, bg-[#bada55] ise arka plan rengi. text- öneki hem boyut hem renk için kullanıldığından derleyici değerin türüne bakarak karar verir; uzunluk birimi boyuta, renk kodu renge gider. Bu çıkarımın yetmediği durumları aşağıdaki "tür ipucu" bölümünde göreceğiz.

Boşluk, alt çizgi ve kaçış

HTML'de sınıflar boşlukla ayrıldığı için bir sınıfın içinde boşluk olamaz. Resmî kural şudur: boşluk yerine alt çizgi yazarsınız, derleyici derleme sırasında onu boşluğa çevirir. Ancak boşluğun geçersiz olacağı yerlerde, örneğin URL'lerde, alt çizgi korunur. Gerçek bir alt çizgiyi, boşluğun da geçerli olabileceği bir yerde korumak isterseniz ters eğik çizgiyle kaçışlarsınız. Aynı derlemenin ikinci satırı bu üç durumu ve Türkçe karakterleri birlikte sınıyor:

<div class="bg-[url('/arka_plan.png')] before:content-['merhaba\_dünya'] after:content-['Ğüş_İı']"></div>

/* (kısaltıldı) */
  .bg-\[url\(\'\/arka_plan\.png\'\)\] {
    background-image: url('/arka_plan.png');
  }
  .before\:content-\[\'merhaba\\_dünya\'\]::before {
    --tw-content: 'merhaba_dünya';
    content: var(--tw-content);
  }
  .after\:content-\[\'Ğüş_İı\'\]::after {
    --tw-content: 'Ğüş İı';
    content: var(--tw-content);
  }

URL içindeki arka_plan.png adı değişmeden kaldı. merhaba\_dünya yazımındaki kaçışlı alt çizgi gerçek bir alt çizgi olarak korundu, kaçışsız Ğüş_İı ise 'Ğüş İı' oldu; yani içerik metninde boşluk istiyorsanız alt çizgi, alt çizgi istiyorsanız ters eğik çizgi ve alt çizgi yazarsınız. Türkçe karakterler hem seçicide hem değerde sorunsuz geçti. Belge JSX'te ters eğik çizginin kaybolabileceğini, bu durumda sınıfı String.raw ile yazmanın bir çözüm olduğunu da not eder.

Boşluğu alt çizgiyle yazmayı unutmak sık yapılan bir hatadır. Şu sınıfı denedik: w-[calc(100% - 2rem)]. HTML açısından bu tek sınıf değil, w-[calc(100%, - ve 2rem)] diye üç ayrı kelimedir. Derleme hatasız bitti, ama çıktıda bu sınıfa ait hiçbir kural yoktu. Doğru yazım w-[calc(100%-2rem)] biçimidir; derleyici calc içindeki işlemcilerin çevresine boşlukları kendisi ekler:

  .w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem);
  }

CSS değişkenleri: parantez kısayolu

Bir CSS değişkenini değer olarak kullanmak için köşeli parantez yerine normal parantez yazarsınız. Belgeye göre fill-(--my-brand-color), fill-[var(--my-brand-color)] yazımının kısaltmasıdır; var() sarmalayıcısını derleyici ekler. Aynı derlemenin üçüncü satırı:

<div class="fill-(--marka-rengi) text-(length:--boyut) text-(color:--renk) text-(--belirsiz)"></div>

/* (kısaltıldı) */
  .fill-\(--marka-rengi\) {
    fill: var(--marka-rengi);
  }
  .text-\(length\:--boyut\) {
    font-size: var(--boyut);
  }
  .text-\(--belirsiz\) {
    color: var(--belirsiz);
  }
  .text-\(color\:--renk\) {
    color: var(--renk);
  }

Tür ipucu ile belirsizliği çözmek

Değişkenin içeriği derleme sırasında bilinmez. text-(--boyut) yazdığınızda derleyici bunun bir yazı boyutu mu yoksa renk mi olduğunu anlayamaz. Resmî belgenin çözümü, değerin önüne tür ipucu eklemektir: length: yazı boyutu, color: renk üretir. Çıktı bunu doğruluyor: text-(length:--boyut) için font-size, text-(color:--renk) için color yazıldı.

İpucu vermezseniz ne olur? Denemede ipucusuz text-(--belirsiz) sınıfı color: var(--belirsiz) üretti. Değişkeniniz aslında 1.5rem gibi bir uzunluk taşıyorsa istediğiniz yazı boyutu hiç uygulanmaz, üretilen color bildirimi de bir uzunluk değeriyle işe yaramaz; üstelik derleme bir uyarı vermez. Değişkenle text- kullanırken boyut istiyorsanız length: ipucunu her zaman yazmak en güvenli yoldur.

Keyfi özellikler ve CSS değişkeni atama

Bazı CSS özelliklerinin Tailwind'de bir utility karşılığı olmayabilir. Belge bu durumda özelliği ve değeri birlikte köşeli parantez içine yazmayı önerir; varyantlar burada da çalışır. Aynı yöntem, koşula göre değişen CSS değişkenleri atamak için de kullanılır. Derlemenin dördüncü satırı:

<div class="[mask-type:luminance] hover:[mask-type:alpha] [--kaydirma:56px] lg:[--kaydirma:44px]"></div>

/* (kısaltıldı) */
  .\[mask-type\:luminance\] {
    mask-type: luminance;
  }
  .\[--kaydirma\:56px\] {
    --kaydirma: 56px;
  }
  @media (hover: hover) {
    .hover\:\[mask-type\:alpha\]:hover {
      mask-type: alpha;
    }
  }
  @media (width >= 64rem) {
    .lg\:\[--kaydirma\:44px\] {
      --kaydirma: 44px;
    }
  }

Değişken atama kalıbı özellikle güçlüdür: --kaydirma değişkeni küçük ekranlarda 56px, lg ve üstünde 44px olur; bu değişkeni okuyan her kural otomatik olarak doğru değeri alır. Örneğin ayrı bir derlemede scroll-mt-(--kaydirma) sınıfı scroll-margin-top: var(--kaydirma) üretti; aynı elemana iki sınıfı birlikte verdiğinizde kaydırma boşluğu ekran genişliğine göre kendiliğinden değişir. Resmî "Styling with utility classes" sayfası da aynı fikri [--gutter-width:1rem] lg:[--gutter-width:2rem] örneğiyle gösterir.

Keyfi özellik yazmadan önce gerçekten bir utility olmadığından emin olmak iyi bir fikirdir. canonicalize komutu bu konuda yardımcı oldu: [mask-type:luminance] girişini mask-type-luminance olarak döndürdü ve bu sınıf derlendiğinde aynı mask-type: luminance kuralını üretti. Yani v4.3.5'te bu özellik için hazır bir sınıf zaten var.

Keyfi özelliklerde özellik adının kendisi de denetlenmez. Ayrı bir derlemede [color:red] beklendiği gibi color: red üretti, ama Türkçe bir ad uydurduğumuz [renk:red] de hatasız derlendi ve CSS'e renk: red diye var olmayan bir özellik yazdı. Tarayıcı bu bildirimi tanımadığı için hiçbir etki görmezsiniz. Özellik adını yazarken CSS'teki resmî adı kullandığınızdan emin olun.

calc, --spacing() ve negatif değerler

Keyfi değerin içine CSS fonksiyonları yazılabilir. Resmî sayfadaki max-h-[calc(100dvh-(--spacing(6)))] örneği, Tailwind'in --spacing() fonksiyonunu keyfi değer içinde kullanır. Derlemenin beşinci satırı:

<div class="max-h-[calc(100dvh-(--spacing(6)))] w-[calc(100%-2rem)] p-[3px]! mt-[-10px] -mt-[10px]"></div>

/* (kısaltıldı) */
  .-mt-\[10px\] {
    margin-top: calc(10px * -1);
  }
  .mt-\[-10px\] {
    margin-top: -10px;
  }
  .max-h-\[calc\(100dvh-\(--spacing\(6\)\)\)\] {
    max-height: calc(100dvh - (calc(var(--spacing) * 6)));
  }
  .p-\[3px\]\! {
    padding: 3px !important;
  }

--spacing(6) çağrısı derlemede calc(var(--spacing) * 6) ifadesine açıldı; böylece tema ölçeği değişirse bu hesap da onunla birlikte değişir. Fonksiyonun ayrıntıları --spacing() ve --alpha() yazısında anlatılır. Negatif değer için iki yazım var ve ikisi de aynı sonuca varır, ama farklı CSS üretir: önüne eksi konan -mt-[10px] değeri calc(10px * -1) ile çarpar, parantez içine eksi yazılan mt-[-10px] ise değeri olduğu gibi -10px bırakır. canonicalize komutu -mt-[10px] için mt-[-10px] biçimini önerdi; yani sadeleştirilmiş biçim değeri parantez içinde negatif yazmaktır. Ünlem işareti de keyfi değerle çalışır: p-[3px]! bildirimi !important yaptı.

Geçersiz değerler sessizce derlenir

Keyfi değerlerin en büyük riski, derleyicinin değeri doğrulamamasıdır. Şu sınıfları derledik: bg-[#zzz] ve text-[1.5rem]. v4.3.5 ile derlenen CSS:

@layer utilities {
  .bg-\[\#zzz\] {
    background-color: #zzz;
  }
  .text-\[1\.5rem\] {
    font-size: 1.5rem;
  }
}

#zzz geçerli bir renk değildir, ama kural yine de yazıldı. Tarayıcı bu bildirimi geçersiz sayıp yok sayacağı için sayfada hiçbir şey olmaz ve hata mesajı da görmezsiniz. Tema sınıflarında (örneğin bg-mavi-500) yanlış ad hiç kural üretmezken, keyfi değerde yanlış değer kural üretir ama çalışmaz. İki durumda da çözüm aynıdır: derlenmiş CSS'e bakmak ve tarayıcı geliştirici araçlarında bildirimin geçersiz olarak işaretlenip işaretlenmediğini kontrol etmek.

Uygulamalı örnek: kampanya başlığı

Bu yazıdaki tekniklerin çoğunu tek bir küçük bölümde birleştirelim. Vurgu rengi sayfayı üreten sistemden geldiği için inline CSS değişkeni olarak veriliyor; düzen ise tema dışı iki kolonlu bir ızgara ve sabit boyutlu bir logo istiyor:

<section style="--vurgu: #0f766e" class="grid grid-cols-[12rem_minmax(0,1fr)] gap-6">
  <img src="/logo.svg" alt="Logo" class="size-[72px]">
  <h2 class="text-(--vurgu) before:content-['Yeni:_'] md:text-[1.75rem]">Kampanya</h2>
</section>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .size-\[72px\] {
    width: 72px;
    height: 72px;
  }
  .grid-cols-\[12rem_minmax\(0\,1fr\)\] {
    grid-template-columns: 12rem minmax(0,1fr);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .text-\(--vurgu\) {
    color: var(--vurgu);
  }
  .before\:content-\[\'Yeni\:_\'\]::before {
    --tw-content: 'Yeni: ';
    content: var(--tw-content);
  }
  @media (width >= 48rem) {
    .md\:text-\[1\.75rem\] {
      font-size: 1.75rem;
    }
  }
}

Her parça beklenen işi yaptı. size-[72px] genişlik ve yüksekliği birlikte verdi. Izgara şablonundaki alt çizgi boşluğa döndü; virgül ise olduğu gibi kaldı, çünkü virgülün çevresinde boşluk gerekmez. text-(--vurgu) ipucusuz yazıldığı halde doğru şekilde renk üretti, çünkü burada istediğimiz zaten renkti. İçerik metnindeki alt çizgi, "Yeni:" kelimesinden sonra bir boşluk bıraktı. md: önekli keyfi yazı boyutu da yalnızca 48rem ve üstünde devreye girecek şekilde medya sorgusuna alındı. Vurgu rengi değiştiğinde CSS'i yeniden derlemek gerekmez; yalnızca inline değişkenin değeri değişir.

Keyfi değer mi, tema değeri mi?

Keyfi değerler kolaylık sağlar, ama her birinin bir bedeli vardır: değer tasarım sisteminizin dışında kalır ve tekrar kullanıldığında her seferinde elle yazılır. Belge bunları tek seferlik ihtiyaçlar için önerir. Aynı değer projede birden fazla yerde geçiyorsa, onu @theme ile tema değişkeni yapmak daha doğrudur; bu @theme yazısında anlatılır.

Bu kararı vermenin pratik bir yolu canonicalize komutudur. Komut, keyfi değeri ölçekteki bir değere eşleyebiliyorsa bunu önerir. Denemelerimizde şu sonuçlar alındı:

Projenizin kendi teması varsa --css bayrağıyla giriş dosyanızı göstermeniz gerekir; bu durumda örneğin temada tanımlı bir renk kodu da tema sınıfına çevrilir. Komutun bütün seçenekleri standalone CLI yazısında anlatılır.

Keyfi varyantlar: kısa bir işaret

Köşeli parantez yalnızca değerlerde değil, varyantlarda da kullanılabilir. Resmî belge lg:[&:nth-child(-n+3)]:hover:underline gibi, seçiciyi doğrudan sınıf adında tanımlayan örnekler verir. Bu konu @custom-variant ile birlikte özel varyantlar yazısında ele alınır.

Sık yapılan hatalar

• Değerin içine boşluk koymak: w-[calc(100% - 2rem)] üç ayrı kelimeye bölünür ve hiçbir şey üretmez; boşluk yerine alt çizgi kullanın ya da işlemcileri bitişik yazın.
• Değişkenle text- kullanırken ipucu vermemek: text-(--x) renk üretir; boyut için text-(length:--x) yazın.
• Geçersiz değeri fark etmemek: bg-[#zzz] derlenir ama tarayıcıda çalışmaz.
• Tekrar eden değeri her yerde keyfi yazmak: Aynı renk ya da ölçü birçok yerde geçiyorsa tema değişkeni yapın.
• Keyfi değeri dinamik birleştirmek: w-[${genislik}px] gibi yazımlar derlemede görünmez; çalışma zamanı değerleri için inline style ya da CSS değişkeni kullanın. Nedeni sınıf tarama yazısında anlatılır.

Sık Sorulan Sorular

Keyfi değer ile inline style arasındaki fark nedir?

İkisi de değeri doğrudan yazar, ama keyfi değer bir sınıftır ve hover:, lg: gibi varyantlarla birleşir. Değer çalışma zamanında bir API'den geliyorsa inline style ya da inline CSS değişkeni daha uygundur, çünkü derleyici o değeri göremez.

Köşeli parantez ile normal parantez ne zaman kullanılır?

Köşeli parantez değeri olduğu gibi yazar; normal parantez bir CSS değişkeni adını var() içine alır. bg-[var(--x)] ile bg-(--x) aynı sonucu verir, canonicalize ikincisini önerir.

Keyfi değerler CSS dosyamı büyütür mü?

Her farklı keyfi sınıf kendi kuralını üretir. Aynı değeri iki farklı yazımla kullanırsanız iki ayrı kural oluşur; bu yazıdaki derlemede mt-[-10px] ve -mt-[10px] aynı sonucu verdiği halde çıktıda iki ayrı blok olarak yer aldı. Tek bir yazım biçimine bağlı kalmak ve sık tekrar eden değerleri temaya taşımak, çıktıyı hem kısa hem tutarlı tutar. canonicalize komutu bu tekrarları bulmanın kolay bir yoludur.

Keyfi değer kullanırken varyant sırası değişir mi?

Hayır. Varyantlar her zaman en solda, keyfi değer ise sınıfın değer kısmında durur: lg:top-[344px] ya da hover:[mask-type:alpha]. Derlemede bu sınıflar normal sınıflarla aynı şekilde ilgili medya sorgusu ya da sözde sınıf bloğuna alındı.

Türkçe karakterler keyfi değerlerde sorun çıkarır mı?

v4.3.5 ile yapılan denemede after:content-['Ğüş_İı'] sorunsuz derlendi ve --tw-content: 'Ğüş İı'; üretti.

Hangi özelliklerde keyfi değer kullanabilirim?

Resmî belgeye göre arka plan renklerinden yazı boyutlarına ve sözde eleman içeriğine kadar framework'ün genelinde çalışır. Utility'si olmayan özellikler için keyfi özellik sözdizimi vardır.

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 CSS öğrenme rehberi · @theme ile özel tema · Utility class mantığı · Özel varyantlar · --spacing() ve --alpha()