Tailwind Utility Class Mantığı: Bir Sınıfı Okumayı Öğrenin

Bir sınıf, bir kural: ilk derleme

Aşağıdaki sınıf listesini @source inline() ile derleyiciye verdik. Bu yöntem, HTML dosyası olmadan belirli sınıfları üretmenin resmî yoludur ve @source direktifi yazısında ayrıntılı anlatılır. Listede kasıtlı olarak var olmayan bir sınıf (bg-mavi-500) da bulunuyor.

@import "tailwindcss" source(none);
@source inline("p-4 px-6 -mt-2 bg-black/50 text-sm/6 md:hover:bg-sky-500 p-13 bg-mavi-500 w-1/2");

v4.3.5 ile derlenen CSS'in utilities katmanı şöyledir:

@layer utilities {
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .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);
    }
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-13 {
    padding: calc(var(--spacing) * 13);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .text-sm\/6 {
    font-size: var(--text-sm);
    line-height: calc(var(--spacing) * 6);
  }
  @media (width >= 48rem) {
    @media (hover: hover) {
      .md\:hover\:bg-sky-500:hover {
        background-color: var(--color-sky-500);
      }
    }
  }
}

Bu kısa çıktıda Tailwind'in neredeyse bütün temel mantığı görünüyor. Dokuz sınıf verdik, sekiz kural geldi: bg-mavi-500 için ne bir kural ne de bir hata mesajı var. Derleyici tanımadığı kelimeyi sessizce atlar. Kuralların sırası da bizim yazdığımız sıra değil; Tailwind kendi iç sıralamasını kullanır ve varyantlı kuralları en sona, ilgili @media bloğunun içine koyar. Değerlerin çoğu sabit piksel değil, var(--spacing) gibi tema değişkenleri üzerinden hesaplanan ifadelerdir. Aynı derlemenin theme katmanında --spacing: 0.25rem, --text-sm: 0.875rem, --color-black: #000 ve --color-sky-500: oklch(68.5% 0.169 237.323) tanımlanır.

Sınıf adının anatomisi

Bir Tailwind sınıfı soldan sağa okunur. En solda iki nokta üst üste ile ayrılan varyantlar, ortada özellik ve değer, sağda eğik çizgi ile modifier ya da ünlem ile important işareti bulunur. Her parça isteğe bağlıdır; en sade sınıflar (flex, underline, hidden) yalnızca tek bir kelimeden oluşur ve değer taşımaz.

Özellik kısaltmaları genellikle CSS özelliğinin baş harflerinden gelir: p padding, m margin, w width, h height. Yön harfleri de aynı mantığı izler: px yatay (çıktıda padding-inline), py dikey, pt yalnızca üst. Bazı kısaltmalar birden fazla özelliğe hizmet eder; text- ile başlayan bir sınıf, değere göre ya yazı boyutu (text-sm) ya renk (text-white) ya da hizalama (text-center) üretir. Derleyici bunu değerin türüne bakarak ayırt eder. Boşluk sınıflarının bütün yön çeşitleri padding ve margin yazısında tek tek ele alınır.

Değerler nereden gelir: tema ve hesap

Çıktıdaki calc(var(--spacing) * 4) ifadesi, v4'ün boşluk sisteminin özüdür. Tek bir temel değişken (--spacing, varsayılanı 0.25rem) vardır ve sayı bu değişkenle çarpılır. Bu yüzden p-4 1rem, p-13 ise 3.25rem eder; ölçekte önceden tanımlı bir 13 basamağı olmasa da derleyici tam sayıyı kabul edip hesabı yazar. Kök yazı boyutu tarayıcı varsayılanı olan 16px ise 1rem 16px'e denk gelir; p-4 için sık görülen "16px" açıklaması bu varsayıma dayanır. Kullanıcı tarayıcısında kök boyutu değiştirirse rem tabanlı bütün değerler onunla birlikte ölçeklenir.

Renkler, yazı boyutları ve köşe yarıçapları gibi diğer değerler de benzer şekilde --color-*, --text-*, --radius-* adlı tema değişkenlerinden okunur. Derleyici yalnızca kullandığınız değişkenleri theme katmanına yazar; yukarıdaki derlemede bütün renk paleti değil, sadece --color-black ve --color-sky-500 yer aldı. Kendi değerlerinizi bu ad alanlarına eklemek @theme direktifi yazısının konusudur.

Kesirler ayrı bir değer biçimidir. w-1/2 sınıfı calc(1 / 2 * 100%) üretir, yani kapsayıcının yarısı. Burada eğik çizgi bir modifier değil, kesrin bir parçasıdır. Aynı karakterin farklı bağlamlarda farklı anlam taşıması sınıf okurken dikkat edilmesi gereken ilk ayrıntıdır; aşağıda modifier bölümünde tekrar döneceğiz.

Varyantlar: koşullu kurallar

İki nokta üst üste ile eklenen her önek, kuralı bir koşula sarar. md: bir medya sorgusu, hover: bir sözde sınıf, dark: renk şeması tercihi demektir. Önemli olan, bir sınıfın içinde aynı anda hem normal hem koşullu stil bulunmamasıdır; resmî belge de bunu vurgular: açık ve koyu tema için ayrı ayrı sınıf yazarsınız. Aşağıdaki derlemede varyantların sırası değiştirildiğinde iç içe geçen blokların sırasının da değiştiğini görebilirsiniz.

@import "tailwindcss" source(none);
@source inline("flex grid bg-red-500! hover:md:bg-sky-500 dark:text-white");

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .bg-red-500\! {
    background-color: var(--color-red-500) !important;
  }
  @media (hover: hover) {
    @media (width >= 48rem) {
      .hover\:md\:bg-sky-500:hover {
        background-color: var(--color-sky-500);
      }
    }
  }
  @media (prefers-color-scheme: dark) {
    .dark\:text-white {
      color: var(--color-white);
    }
  }
}

İlk derlemede md:hover: yazmıştık ve dışta genişlik sorgusu, içte hover sorgusu vardı. Burada hover:md: yazınca blokların sırası tersine döndü. İki yazımın da sonucu aynı koşuldur (geniş ekran ve fare üzerinde), çünkü iç içe medya sorguları birlikte sağlanmalıdır. Yine de sınıf adları farklı olduğu için derleyici bunları iki ayrı sınıf olarak görür; bir projede ikisini karışık kullanmak gereksiz tekrar üretir. Bir alışkanlık seçip ona bağlı kalmak en temiz yoldur. Dikkat çekici bir başka ayrıntı: hover: v4.3.5 çıktısında @media (hover: hover) içine alınıyor; bu davranış ve dokunmatik ekranlara etkisi hover ve focus durumları yazısında, dark: ise dark mode yazısında anlatılır. Ekran genişliği önekleri responsive tasarım yazısının konusudur.

Negatif değerler ve important işareti

Sınıfın başına konan eksi işareti değeri negatife çevirir. -mt-2 için üretilen kural margin-top: calc(var(--spacing) * -2) oldu; yani çarpan eksi ikidir. Negatif değer her özellik için anlamlı değildir. Ayrı bir denemede -top-4 için top: calc(var(--spacing) * -4), -z-10 için z-index: calc(10 * -1) üretildi; buna karşılık padding negatif olamadığı için -p-4 v4.3.5 ile hiç üretilmedi, yine hata mesajı da çıkmadı. Hangi sınıfların negatif biçimi olduğu ilgili konu yazılarında ayrıca belirtilir.

Sınıfın sonuna konan ünlem işareti ise bildirimi !important yapar. Çıktıda .bg-red-500\! seçicisinin kuralı background-color: var(--color-red-500) !important olarak yazıldı. Bu, başka bir CSS kaynağının daha yüksek özgüllükle aynı özelliği ezdiği durumlarda acil çıkış kapısıdır; günlük kullanımda ihtiyaç duyulmamalıdır. Bütün utility sınıflarını important yapan @import "tailwindcss" important; bayrağı ve önek seçeneği prefix(tw) da resmî belgede anlatılır; ayrıntılar çakışan sınıflar yazısında ve katmanlar yazısında yer alıyor.

Eğik çizgi modifier'ı: opaklık ve satır yüksekliği

Bir renk değerinin sonuna eklenen /50, rengi yüzde 50 saydam yapar. bg-black/50 çıktısı iki katmanlıdır: önce color-mix(in srgb, #000 50%, transparent) ile bir yedek değer yazılır, ardından tarayıcı color-mix(in lab, ...) destekliyorsa @supports bloğu içindeki oklab karışımı devreye girer. Böylece eski motorlar da makul bir renk görür. Opaklık modifier'ının ayrıntıları ve opacity-* sınıfından farkı renk opaklığı yazısında ele alınır.

Aynı eğik çizgi yazı boyutu sınıflarında başka bir şey yapar: text-sm/6 hem font-size: var(--text-sm) hem de line-height: calc(var(--spacing) * 6) yazar. Yani buradaki 6, boşluk ölçeğinden bir satır yüksekliğidir (varsayılan ölçekle 1.5rem). Kesirde bölme, renkte opaklık, yazı boyutunda satır yüksekliği: eğik çizginin anlamı solundaki sınıfa göre belirlenir. Yazı boyutu ve satır yüksekliği eşleşmeleri font boyutu yazısında anlatılır.

Üretilen CSS'i okumak

Derleme çıktısı birkaç bölümden oluşur ve her birinin bir görevi vardır. Dosya, Tailwind'in MIT lisansını belirten bir yorumla başlar. Ardından @layer theme, base, components, utilities; satırı katman sırasını ilan eder. @layer theme kullanılan tema değişkenlerini :root üzerine yazar, @layer base Preflight sıfırlamalarını içerir, @layer utilities sizin sınıflarınızı taşır. Bazı sınıflar (örneğin font-bold ya da border) yardımcı değişkenlere ihtiyaç duyar; bunlar için dosyanın sonunda @property kayıtları ve bir @layer properties bloğu belirir. Preflight'ın ne yaptığını Preflight yazısında, katman sırasının neden önemli olduğunu katmanlar yazısında okuyabilirsiniz.

Seçicilerdeki ters eğik çizgiler de okumayı zorlaştırabilir. CSS'te iki nokta üst üste ve eğik çizgi gibi karakterler seçici içinde özel anlam taşıdığından, Tailwind bunları kaçışlı yazar: HTML'de md:hover:bg-sky-500 olan sınıf CSS'te .md\:hover\:bg-sky-500 olur, w-1/2 ise .w-1\/2 olur. HTML tarafında ters eğik çizgi yazmazsınız; kaçış yalnızca üretilen CSS'in içindedir.

Bir başka önemli nokta, sınıfların çıktıdaki sırasının HTML'deki sıradan bağımsız olmasıdır. İkinci derlemede hem flex hem grid vardı ve ikisi de display özelliğini yazıyor. Aynı elemana ikisini birden verirseniz, class özelliğinde hangisini önce yazdığınızın önemi yoktur; stil dosyasında sonra gelen kural kazanır. v4.3.5 çıktısında .grid, .flex kuralından sonra geldiği için eleman grid olur. Resmî belgenin önerisi açıktır: çakışan iki sınıfı aynı anda eklemeyin, koşula göre yalnızca birini ekleyin.

Birden fazla sınıf aynı özelliği nasıl paylaşır

Bazı CSS özellikleri birden fazla parçadan oluşur. filter buna iyi bir örnektir: bulanıklık, parlaklık ve gri tonlama tek bir filter bildiriminde yan yana yazılmak zorundadır. Tailwind her filtre sınıfına kendi CSS değişkenini (--tw-blur, --tw-grayscale gibi) atar ve filter özelliğini bu değişkenlerin birleşimi olarak yazar. Böylece blur-sm grayscale birlikte kullanıldığında biri ötekini ezmez. Resmî belge aynı yaklaşımın gradyanlarda, gölge renklerinde ve dönüşümlerde de kullanıldığını belirtir. Bu mekanizmayı çalışırken görmek için filtreler yazısına ve transform yazısına bakabilirsiniz.

Neden inline style değil?

Utility sınıfları ilk bakışta style özelliğine benzer, çünkü stil yine HTML'in içinde durur. Resmî belge iki temel farkı öne çıkarır. Birincisi, sınıflar rastgele sayılar yerine önceden tanımlı bir tasarım sisteminden değer seçer; bu da sayfanın genelinde tutarlı aralıklar ve renkler sağlar. İkincisi, inline style ile hover, focus ya da medya sorgusu yazamazsınız; sınıflarda ise bunlar birer önekten ibarettir. Belge ayrıca stillerin yalnızca bulundukları elemanı etkilemesini, değişikliklerin daha güvenli yapılmasını ve stil dosyasının özellik eklendikçe doğrusal büyümemesini avantaj olarak sayar.

Bu, inline style'ın tamamen yasak olduğu anlamına gelmez. Değer bir veritabanından ya da API'den çalışma zamanında geliyorsa (örneğin kullanıcının seçtiği marka rengi), Tailwind bu değeri derleme sırasında göremeyeceği için inline style ya da inline CSS değişkeni daha uygun olabilir. Belge, değişkeni style ile verip sınıfta bg-(--bg-color) biçiminde okumayı da bir kalıp olarak gösterir. Bu sözdizimi arbitrary values yazısında anlatılır.

Kullanılmayan ve bilinmeyen sınıflar

Tailwind büyük ve hazır bir CSS dosyası dağıtmaz. Kaynak dosyalarınızı düz metin olarak tarar, sınıf adına benzeyen her kelimeyi aday kabul eder ve yalnızca bilinen bir utility'ye karşılık gelen adaylar için kural üretir. İlk derlemedeki bg-mavi-500 bu yüzden çıktıya girmedi: mavi diye bir renk teması yoktur. Bu sessizlik bir avantajdır, çünkü metin içinde sınıfa benzeyen sıradan kelimeler gereksiz CSS üretmez. Ama yazım hatalarının da sessizce kaybolması anlamına gelir. Bir sınıf çalışmıyorsa ilk yapılacak iş, derlenmiş CSS'te o sınıfın seçicisini aramaktır. Taramanın nasıl çalıştığı sınıf tarama yazısında, sınıfların neden üretilmediğine dair sık nedenler sık hatalar yazısında toplanmıştır.

Tanınmayan bir sınıfın sessiz kaldığı tek yer HTML değildir; CSS içinde @apply ile bilinmeyen bir sınıf kullanırsanız durum değişir ve CLI derlemeyi bir hatayla durdurur. Bu fark @apply yazısında gösterilir.

Editör desteği

Uzun sınıf listelerini okumayı kolaylaştıran iki resmî araç vardır. VS Code için Tailwind CSS IntelliSense eklentisi sınıf ve direktif tamamlama, hatalar ve olası sorunlar için uyarı (linting), sınıfın üzerine gelindiğinde ürettiği CSS'in önizlemesi ve Tailwind'e özgü at-rule'lar için sözdizimi vurgulama sunar. Resmî Prettier eklentisi ise sınıfları önerilen sıraya dizer; belgedeki örnekte önce temel sınıflar, sonra varyantlı sınıflar gelir. Belge ayrıca JetBrains IDE'lerinin ve Zed editörünün yerleşik Tailwind desteği olduğunu belirtir. Bu araçlar burada çalıştırılmadı; özellik listesi resmî editör kurulumu sayfasından alındı.

Küçük bir alıştırma: sınıfları tahmin edin

Okuma becerisini sınamak için şu sınıfları derlemeden önce yorumlamayı deneyin: px-6, -mt-2, w-1/2, text-sm/6. Yukarıdaki ilk çıktıya göre ilki padding-inline değerini --spacing ile altı kat çarpar, ikincisi üst marjini negatif iki kat yapar, üçüncüsü genişliği yüzde elliye ayarlar, dördüncüsü küçük yazı boyutunu ve 6 birimlik satır yüksekliğini birlikte verir. Tahminleriniz doğruysa sınıf adlarının mantığını kavramışsınız demektir; yanlışsa farkı çıktıdaki kuralla karşılaştırmak en hızlı öğrenme yoludur.

Sık yapılan hatalar

• Yazım hatasını fark etmemek: bg-mavi-500 gibi tanınmayan bir sınıf hata vermez, sadece üretilmez. Derlenmiş CSS'te seçiciyi arayın.
• class sırasının önemli olduğunu sanmak: class="grid flex" ile class="flex grid" aynı sonucu verir; stil dosyasındaki sıra belirleyicidir.
• Eğik çizgiyi her yerde opaklık sanmak: w-1/2 kesir, text-sm/6 satır yüksekliği, bg-black/50 opaklıktır.
• Pikselleri sabit sanmak: p-4 1rem demektir; 16px eşdeğeri yalnızca kök yazı boyutu 16px iken geçerlidir.
• Important'ı varsayılan çözüm yapmak: ! işareti çakışmayı gizler; önce çakışan sınıfı kaldırmayı deneyin.

Sık Sorulan Sorular

Ölçekte olmayan bir sayı yazarsam ne olur?

Boşluk ve boyut sınıflarında tam sayılar doğrudan --spacing ile çarpılır. Örnekte p-13 sorunsuz derlendi ve calc(var(--spacing) * 13) üretti. Tamamen tema dışı bir değer gerekiyorsa köşeli parantezle keyfi değer yazabilirsiniz.

Varyantları hangi sırayla yazmalıyım?

md:hover: ile hover:md: aynı koşulu üretse de farklı sınıf adlarıdır ve CSS'te blokların iç içe geçme sırası değişir. Projede tek bir sıra seçmek, gereksiz tekrarı önler.

Kullanmadığım sınıflar dosyayı büyütür mü?

Hayır. Derleyici yalnızca kaynaklarda bulduğu ve tanıdığı sınıflar için kural yazar; tema değişkenlerinden de sadece kullanılanlar theme katmanına girer.

Sınıfın ürettiği CSS'i en hızlı nasıl görürüm?

Standalone CLI ile @source inline("sinif") içeren küçük bir giriş dosyası derlemek en doğrudan yoldur. Komutlar standalone CLI yazısında anlatılır; editörde IntelliSense eklentisinin hover önizlemesi de aynı bilgiyi gösterir.

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 · Sınıf tarama ve @source · Arbitrary values · Çakışan sınıflar · Standalone CLI