Tailwind'de Arbitrary Value Tuzağı

PR'da w-[347px] gördüm. Figma 347 demişti, geliştirici yapıştırmıştı. Yanında pt-[13px], gap-[22px], max-w-[738px]. Dört sayı, dört istisna. Spacing ölçeği 4'lü gidiyordu; sayfa 13 ve 22 ile konuşuyordu. Görsel olarak 'pixel-perfect', sistem olarak gürültü.

Arbitrary value Tailwind'in kaçış kapısı. Bir kez, bir reklam birimi, bir üçüncü parti embed — tamam. Kapı açık kalınca her Figma ölçüsü sınıfa dönüşür. JIT her eşsiz değeri üretir. Cache ısınır, tasarım gözü körelir: 16 mi 18 mi artık kimse söyleyemez çünkü ikisi de geçerli.

@theme {
  --spacing-18: 4.5rem;
  --container-article: 42rem;
  --width-ad-leader: 728px;
}

export function ArticleColumn({ children }: { children: React.ReactNode }) {
  return 
{children}
;
}

export function LeaderSlot() {
  return 
;
}

Yazı sütunu token. Reklam birimi de token; çünkü 728×90 bir endüstri sayısı, her sayfada yeniden 728 yazmak yerine bir isim. 347'yi token yapmadım. En yakın spacing'e yuvarladım, Figma'ya 'ölçek 4.5rem' diye döndüm. Tasarımcı 347'de ısrar ederse o bir istisna dosyasına gider, utility çöplüğüne değil.

Ne zaman bırakıyorum: tek seferlik bir döndürme açısı, bir clip-path, bir grid şablonu ki tema şişmesin. Kural: aynı sayı ikinci kez yazıldıysa token. Bir kez yazılıp unutulacaksa arbitrary. Unutulmayan sayılar, unutulmayan sınıflar üretiyor.

Renk ve kırılma

text-[#3a5a40] bir marka rengi olabilir. Marka rengi token'dır, arbitrary değil. Hex'i on yerde kopyalamak, dark mode'da on yeri unutmak. --color-brand bir kez, className text-brand. Arbitrary hex, Figma'dan gelen 'geçici'. Geçici üç sprint yaşar.

min-w-[220px] de aynı aile. Tablo sütunu gerçekten 220 isterse --width-col-status. 220, 218, 224 yan yana durunca kimse hangisinin bilinçli olduğunu bilemez. Lint olarak arbitrary'yi yasaklamıyorum; PR'da ikinci kez gördüğüm sayıyı isimlendiriyorum. Yasak, kaçış kapısını gizler. İsim, kapıyı daraltır.

JIT ve tekrar

Her eşsiz arbitrary, üretim CSS'ine bir kural ekler. On iki sayfada on iki 347 yok, üç 347, iki 346, bir 348 vardır. Göz ayırt etmez, paket eder. Token'a çekince kural sayısı düşer, niyet okunur. max-w-article ne işe yarar bilirsin. max-w-[672px] 672'nin nereden geldiğini üç ay sonra sormazsın, kopyalarsın.

Responsive arbitrary daha kalabalık: min-[812px]:p-[18px]. Eşik de, boşluk da ölçek dışı. md:p-4 okunur. 812, bir cihazın hayaleti. Hayaleti tema kırılmasına yazmıyorum; gerekirse bir ekran adıyla extend ediyorum. Arbitrary, Figma'nın export ettiği her sayıyı sınıfa çevirme izni değil. İzin, bir kez ve utangaç.

Ne zaman utangaç değil

Üçüncü parti bir widget 728×90 ister, ölçek 4.5rem demez. O sayıyı token yaptım çünkü tekrar edecek. Bir blog gömme iframe'si 560×315; bir kez, sayfada kalır, token olmaz. Tekrar edince dönerim. Tuzağı kuran, birinci istisnanın ikinciyi davet etmesidir. Daveti kesmek için PR'da 'bu sayı nerede başka duruyor' diye arıyorum. İki sonuç, bir isim.

Çizgi yüksekliği ve harf

text-[15.5px] leading-[22px] tracking-[-0.2px] bir başlıkta birikebilir. Tipografi ölçeği bunun için var: text-lg, leading-snug, tracking-tight. Yarım piksel, tasarımcının ekranında durur, kodda ölçek kırılır. Yuvarla, isimlendir, Figma'ya ölçeği geri ver. Sekizinci yazı bu geribildirimi seviyor. Arbitrary, geribildirimi erteler. Token, konuşmayı açar.

grid-cols-[...]

grid-cols-[200px_1fr_72px] bir tablo için bir kez masum. İkinci tabloda 196 ve 80 belirdiğinde ölçek yine kaçtı. col-status, col-main, col-actions isimleri aynı ızgarayı iki yerde konuşturur. Arbitrary grid, Figma kolonunu yapıştırmaktır. Token grid, sütunun işini söylemektir. İş söylenince 347 unutulur.