Tailwind Font Size, Font Weight ve Font Family Kullanımı

Yazı boyutu ölçeği: text-xs'ten text-9xl'e

Boyut değerleri --text-* tema değişkenlerinden gelir ve her boyutun bir de --text-*--line-height eşi vardır. v4.3.5 tema dosyasındaki değerler aşağıda. Piksel karşılıkları, tarayıcının kök yazı boyutunun varsayılan 16px olduğu varsayımıyla hesaplanmıştır; kullanıcı tarayıcısında kök boyutu değiştirirse rem tabanlı tüm değerler onunla birlikte ölçeklenir.

Satır yüksekliği değerleri birimsiz oranlardır ve ilginç bir mantıkla yazılmıştır. calc(1.25 / 0.875) ifadesi, 0.875rem boyutundaki bir yazıda satır yüksekliğinin 1.25rem'e denk gelmesini sağlayan orandır. Yani text-sm varsayılan olarak 14px yazı ve 20px satır yüksekliği verir; text-base 16px yazı ve 24px satır, text-4xl 36px yazı ve 40px satır. 5xl ve üzerindeki büyük başlık boyutlarında oran 1'dir, yani satır yüksekliği yazı boyutuna eşittir. Bazı özet tablolarda yalnızca 6xl'e kadar olan boyutlar listelenir; 7xl, 8xl ve 9xl de varsayılan temada tanımlıdır.

Derlenen CSS ve --tw-leading değişkeni

Aşağıdaki başlık ve paragrafı v4.3.5 ile derledik:

<h1 class="text-4xl font-bold md:text-6xl">Başlık</h1>
<p class="text-base">Gövde metni</p>
<p class="text-4xl leading-7">Sıkı satırlı büyük yazı</p>

v4.3.5 ile derlenen CSS (ilgili kurallar):

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.leading-7 {
  --tw-leading: calc(var(--spacing) * 7);
  line-height: calc(var(--spacing) * 7);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
@media (width >= 48rem) {
  .md\:text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
}
/* (kısaltıldı) */

Boyut sınıflarının line-height değeri doğrudan tema değişkeni değil, var(--tw-leading, ...) biçiminde bir yedekli ifadedir. Elemanda bir leading-* sınıfı yoksa --tw-leading tanımsızdır ve boyutun varsayılan satır yüksekliği kullanılır. leading-7 eklendiğinde ise bu sınıf hem --tw-leading değişkenini hem de line-height özelliğini doğrudan yazar. Böylece boyut sınıfı CSS'te daha sonra gelse bile değişkenin değerini okur ve sizin seçtiğiniz satır yüksekliğini korur. Bu senaryo varsayımsal değildir: text-4xl md:text-6xl leading-7 yazdığınızda medya sorgulu md:text-6xl kuralı çıktıda leading-7 kuralından sonra gelir; yine de satır yüksekliği var(--tw-leading, ...) sayesinde 7 adımda kalır. Aynı mekanizma kalınlık için --tw-font-weight ile kurulmuştur. Bu tasarım, iki sınıfın aynı özelliği yazdığı durumda "hangisi kazanır" sorusunu satır yüksekliği için ortadan kaldırır; genel çakışma kuralları çakışan sınıflar yazısında.

Responsive kullanımda da bir şey değişmez: md:text-6xl yalnızca 48rem ve üzeri genişlikte devreye girer ve kendi varsayılan satır yüksekliğini getirir. Kırılım noktaları responsive tasarım yazısında anlatılıyor.

Boyut ve satır yüksekliği tek sınıfta: text-sm/6

Resmî font-size sayfası, boyutla birlikte satır yüksekliğini eğik çizgiyle vermeyi gösterir: text-sm/6, text-sm/7, text-sm/8. Eğik çizgiden sonraki sayı, boşluk ölçeğinin bir katıdır. Köşeli parantezle keyfi bir oran, normal parantezle bir değişken de verebilirsiniz. Derleme çıktısı:

.text-sm\/6 {
  font-size: var(--text-sm);
  line-height: calc(var(--spacing) * 6);
}
.text-lg\/\[1\.9\] {
  font-size: var(--text-lg);
  line-height: 1.9;
}
.text-sm\/\(--sh\) {
  font-size: var(--text-sm);
  line-height: var(--sh);
}

--spacing varsayılan temada 0.25rem olduğu için text-sm/6 1.5rem, yani 16px kökte 24px satır yüksekliği verir. Bu yazımın --tw-leading kullanmadığına dikkat edin: satır yüksekliği doğrudan yazılır. Aynı elemana ayrıca leading-* eklemek gereksizdir ve kafa karıştırır; ya eğik çizgili yazımı ya da ayrı leading-* sınıfını seçin. Eğik çizginin renk sınıflarında saydamlık anlamına geldiğini de unutmayın; aynı işaretin iki anlamı opaklık yazısında karşılaştırılıyor.

Keyfi boyut ve değişken: neden length: ipucu gerekir

Ölçek dışında bir boyut için text-[15px] yazabilirsiniz. Boyutu bir CSS değişkeninden almak istediğinizde ise resmî sayfa text-(length:--boyut) yazımını gösterir. Buradaki length: ipucu süs değildir. text- öneki hem renk hem boyut için kullanıldığından, derleyici bir değişkenin içinde ne olduğunu bilemez. Denemede text-(--x) yazdığımızda çıktı color: var(--x) oldu; yani ipucu olmadan değişken renk olarak yorumlandı.

.text-\(length\:--boyut\) {
  font-size: var(--boyut);
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\(--x\) {
  color: var(--x);
}

Bir ayrıntı daha: keyfi boyutlar varsayılan satır yüksekliği getirmez. text-[15px] çıktısında yalnızca font-size bulunuyor; satır yüksekliği miras alınan değer olarak kalır. Ölçek dışı bir boyut kullanıyorsanız satır yüksekliğini de leading-* ile kendiniz vermeniz gerekir. Tür ipuçlarının tamamı arbitrary values yazısında anlatılıyor.

Kalınlık: font-thin'den font-black'e

Kalınlık sınıfları --font-weight-* değişkenlerine başvurur. v4.3.5 değerleri tabloda:

Ara bir değer için keyfi değer yazarsınız: font-[650] çıktıda font-weight: 650 verdi. font-650 gibi köşeli parantezsiz bir yazım ise hiçbir kural üretmedi. Değişkenli yazımda dikkat edilecek bir ayrım vardır: font-(--kalinlik) kalınlık olarak yorumlandı ve font-weight: var(--kalinlik) üretti, yazı ailesini bir değişkenden almak için ise resmî sayfadaki gibi font-(family-name:--yazi) yazmanız gerekir. Kalınlık sınıfı yalnızca CSS değerini yazar; o kalınlığın gerçekten çizilebilmesi, yüklediğiniz yazı tipi dosyasının bu kalınlığı kapsamasına bağlıdır. Aşağıdaki @font-face örneğindeki font-weight: 200 700 aralığı bu yüzden önemlidir.

.font-\[650\] {
  --tw-font-weight: 650;
  font-weight: 650;
}
.font-\(--kalinlik\) {
  --tw-font-weight: var(--kalinlik);
  font-weight: var(--kalinlik);
}
.font-\(family-name\:--yazi\) {
  font-family: var(--yazi);
}

Yazı ailesi: font-sans, font-serif, font-mono

Üç hazır aile, sistem yazı tiplerinden oluşan yığınlara başvurur. v4.3.5 tema dosyasında --font-sans şu yığınla başlar: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif ve ardından emoji yazı tipleri. --font-serif ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif, --font-mono ise ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas ile başlayan bir yığındır. Hiçbir sınıf yazmasanız da sayfanın varsayılan ailesi --default-font-family: var(--font-sans) üzerinden sans yığını olur; bu, preflight katmanının işidir ve preflight yazısında anlatılıyor.

Kendi yazı tipinizi eklemek: @theme ve @font-face

Yeni bir aile adı tanımlamak için @theme içinde --font- ile başlayan bir değişken yazarsınız; --font-display tanımı font-display sınıfını oluşturur. Yazı tipi dosyasını kendiniz barındırıyorsanız resmî sayfadaki gibi ayrı bir @font-face kuralı eklersiniz. Google Fonts gibi bir servisten gelen URL içe aktarımı ise dosyanın en başına, @import "tailwindcss" satırından önce yazılmalıdır. Aşağıdaki girişi derledik:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import "tailwindcss";

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/Oswald.woff2") format("woff2");
}

@theme {
  --font-roboto: "Roboto", sans-serif;
  --font-display: "Oswald", sans-serif;
}

Çıktının ilk satırları, URL içe aktarımının lisans başlığından hemen sonra korunduğunu gösteriyor:

/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@layer properties;
/* (kısaltıldı) */
.font-display {
  font-family: var(--font-display);
}
.font-roboto {
  font-family: var(--font-roboto);
}

Sırayı ters çevirip URL içe aktarımını @import "tailwindcss" satırının altına koyduğumuzda CLI hiçbir uyarı vermedi, fakat @import url(...) satırı çıktı dosyasının 166. satırına, yani başka kuralların arasına düştü. Resmî sayfa, tarayıcıların @import kurallarının diğer kurallardan önce gelmesini istediğini belirtiyor; dolayısıyla bu hata derlemede değil tarayıcıda, yazı tipinin hiç yüklenmemesi olarak ortaya çıkar. @font-face kuralı ise @theme dışında, kendi başına yazılır.

Bir aileye varsayılan OpenType özellikleri de bağlayabilirsiniz: resmî sayfa --font-display--font-feature-settings ve --font-display--font-variation-settings değişkenlerini gösterir. Bu değişkenler tanımlıysa font-display sınıfı bu ayarları da uygular.

Kendi boyut adınız: --text-* ve alt değişkenleri

Ölçeğe yeni bir boyut eklerken satır yüksekliği, harf aralığı ve kalınlık varsayılanlarını da birlikte tanımlayabilirsiniz. Resmî sayfadaki --text-tiny örneğini derledik:

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

.text-tiny {
  font-size: var(--text-tiny);
  line-height: var(--tw-leading, var(--text-tiny--line-height));
  letter-spacing: var(--tw-tracking, var(--text-tiny--letter-spacing));
  font-weight: var(--tw-font-weight, var(--text-tiny--font-weight));
}

Üç alt değişkenin her biri yine yedekli biçimde yazıldı: elemanda leading-*, tracking-* veya font-* kalınlık sınıfı varsa onların değeri öncelik alır, yoksa boyutun kendi varsayılanı kullanılır. Bu, "küçük etiket yazısı" gibi tekrar eden bir tipografi kalıbını tek sınıfta toplamanın temiz bir yoludur. Tema ad alanlarının tamamı @theme direktifi yazısında ele alınıyor.

Uygulamalı örnek: bir makale sayfasının tipografisi

Şimdi bir blog yazısının üst bölümünü baştan sona sınıflarla kuralım. Küçük bir kategori etiketi, responsive büyüyen bir başlık, daha geniş satırlı bir giriş paragrafı, gövde metni ve satır içi bir komut örneği:

<span class="text-xs font-medium text-sky-700">Rehber</span>
<h1 class="font-display text-3xl font-semibold md:text-5xl">Sunucu yedeklerini planlamak</h1>
<p class="text-lg/8 text-gray-600">Kısa bir giriş paragrafı.</p>
<p class="text-base/7">Gövde metni.</p>
<code class="font-mono text-sm">rsync -a</code>

v4.3.5 ile derlenen CSS (--font-display: "Oswald", sans-serif tanımıyla):

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base\/7 {
    font-size: var(--text-base);
    line-height: calc(var(--spacing) * 7);
  }
  .text-lg\/8 {
    font-size: var(--text-lg);
    line-height: calc(var(--spacing) * 8);
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  @media (width >= 48rem) {
    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
}

Bu çıktıda birkaç tasarım kararını okuyabilirsiniz. Başlık mobilde text-3xl ile 1.875rem, 48rem ve üzeri genişlikte md:text-5xl ile 3rem olur; satır yüksekliği de buna göre calc(2.25 / 1.875) oranından 1 oranına geçer. Büyük başlıkta oranın 1 olması, iki satıra taşan bir başlığın satırlarını birbirine yakın tutar; daha ferah bir görünüm isterseniz leading-tight gibi bir sınıfla bu oranı açabilirsiniz. Giriş paragrafı text-lg/8 ile 1.125rem yazı ve 2rem satır yüksekliği alır; gövde metni text-base/7 ile 1rem yazı ve 1.75rem satır alır. Yani giriş paragrafına gövdeden biraz daha fazla nefes payı verilmiştir. Etiket ve kod örneği ise ölçeğin varsayılan satır yüksekliklerini kullanır.

Renk sınıfları (text-gray-600, text-sky-700) ve tipografi sınıfları aynı text- önekini paylaşsa da çıktıda ayrı özelliklere gider: biri color, öteki font-size yazar. Bu yüzden bir elemanda text-lg text-gray-600 birlikte sorunsuz çalışır; çakışma yalnızca iki boyut sınıfı veya iki renk sınıfı aynı elemanda bulunduğunda ortaya çıkar.

Sık yapılan hatalar

• Değişkenli boyutta ipucunu unutmak: text-(--boyut) renk olarak derlenir. Boyut için text-(length:--boyut) yazın.
• Keyfi boyutta satır yüksekliğini unutmak: text-[15px] satır yüksekliği yazmaz; gerekiyorsa leading-* ekleyin veya ölçekten bir boyut seçin.
• Yazı tipi URL'sini yanlış yere koymak: @import url(...) satırı @import "tailwindcss" satırından önce gelmelidir; CLI ters sırada uyarı vermez.
• Yüklenmemiş kalınlığı beklemek: font-semibold yalnızca font-weight: 600 yazar; yazı tipi dosyasını getirmez. 600 kalınlığını kapsayan bir dosya veya değişken yazı tipi yüklediğinizden emin olun.
• Ad alanını karıştırmak: Aile için --font-*, kalınlık için --font-weight-*, boyut için --text-* değişkenleri kullanılır. --font-size-baslik gibi bir ad sınıf üretmez.

Sık Sorulan Sorular

text-base kaç piksel?

Değeri 1rem'dir; kök yazı boyutu 16px olduğunda 16px eder. Varsayılan satır yüksekliği calc(1.5 / 1), yani 24px'tir. v4.3.5 preflight dosyası html elemanına bir font-size yazmaz, yalnızca line-height: 1.5 verir; bu nedenle sınıf yazmadığınız metinler tarayıcının kök boyutunu ve 1.5 oranını kullanır.

Satır yüksekliğini nasıl değiştiririm?

Ya text-sm/6 gibi eğik çizgili yazımı ya da ayrı bir leading-6 sınıfını kullanın. Ayrı sınıf --tw-leading değişkenini ayarladığı için boyut sınıfının varsayılanını her durumda ezer; ayrıntı leading yazısında.

Tüm boyutları birlikte küçültüp büyütebilir miyim?

Ölçekteki değerlerin hepsi rem cinsinden olduğu için kök elemanın yazı boyutuna bağlıdır; kök boyutu değişirse text-xs ile text-9xl arasındaki tüm sınıflar orantılı olarak değişir. Belirli bir boyutu projeniz için farklı istiyorsanız ise @theme içinde aynı adı yeniden tanımlarsınız: örneğin --text-base: 1.0625rem; yazmak yalnızca text-base sınıfını etkiler. Bu durumda --text-base--line-height değerini de gözden geçirmeniz iyi olur, çünkü varsayılan oran eski boyuta göre hesaplanmıştır. Denememizde bu tanımla --text-base 1.0625rem oldu, --text-base--line-height ise değişmeden calc(1.5 / 1) olarak kaldı.

Projeye özel bir başlık yazı tipi nasıl tanımlanır?

@theme içine --font-display: "Oswald", sans-serif; yazın, yazı tipini @font-face veya bir URL içe aktarımıyla yükleyin ve HTML'de font-display sınıfını kullanın.

Akışkan (ekrana göre büyüyen) yazı boyutu yapılabilir mi?

En basit yol responsive önekleridir: text-sm md:text-base gibi. Kesintisiz büyüme isterseniz keyfi değerle bir CSS fonksiyonu yazabilirsiniz: text-[clamp(1rem,2.5vw,2rem)] derlendiğinde font-size: clamp(1rem, 2.5vw, 2rem) verdi. Bu durumda da satır yüksekliğini ayrıca belirlemeniz gerekir.

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 · Metin hizalama, leading ve tracking · Truncate ve line-clamp · @theme direktifi · Preflight · Tailwind sıfırdan rehber