Tailwind Metin Sınıfları: Hizalama, leading, tracking ve Alt Çizgi

Metin hizalama: text-left, text-center, text-start

Hizalama sınıfları text-align özelliğini doğrudan yazar ve bir tema değişkenine bağlı değildir. Altı sınıfın derleme çıktısı:

.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}

text-left ve text-right fiziksel yönleri, text-start ve text-end ise yazı yönüne göre başlangıç ve bitişi ifade eder. Soldan sağa yazılan Türkçe bir sayfada text-start sola hizalar; aynı bileşen sağdan sola yazılan bir dilde kullanılırsa otomatik olarak sağa hizalanır. Çok dilli bir proje planlıyorsanız mantıksal sınıfları tercih etmek, ileride yön değişikliği için ikinci bir sınıf yazma ihtiyacını ortadan kaldırır. Bu mantığın boşluk tarafı (ps-, pe-, ms-, me-) padding ve margin yazısında anlatılıyor.

Hizalama responsive öneklerle de birleşir. Mobilde ortalanmış, geniş ekranda başa yaslanan bir giriş metni için text-center md:text-start yazarsınız; derleme çıktısında .md\:text-start kuralı @media (width >= 48rem) içinde üretildi. Unutmayın, text-align yalnızca satır içi içeriği, yani metni ve satır içi elemanları hizalar; bir kutunun kendisini ortalamak için div ortalama yazısındaki tariflere ihtiyacınız var.

Satır yüksekliği: leading-*

Satır yüksekliğini üç şekilde verebilirsiniz: adlandırılmış değerlerle, boşluk ölçeğinin katlarıyla veya keyfi değerle. Adlandırılmış değerler v4.3.5 tema dosyasındaki --leading-* değişkenlerinden gelir; resmî line-height sayfası bu adları listelemiyor ama CLI hepsini derliyor:

Adlandırılmış değerler birimsiz oranlardır; yazı boyutu büyüdükçe satır aralığı da orantılı olarak büyür. Sayılı değerler ise --spacing değişkeninin katıdır ve sabit bir uzunluk verir: leading-6 her yazı boyutunda 1.5rem'dir. Satırları sabit bir dikey ritme oturtmak istediğiniz gövde metninde sayılı değerleri, responsive olarak büyüyen başlıklarda ise boyutla birlikte ölçeklenen oranları tercih edebilirsiniz. Derleme çıktısı:

.leading-6 {
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
}
.leading-\[1\.7\] {
  --tw-leading: 1.7;
  line-height: 1.7;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}

Her leading-* kuralı iki şey yazar: line-height ve --tw-leading değişkeni. İkincisinin amacı, yazı boyutu sınıflarıyla uyum sağlamaktır. text-lg gibi bir boyut sınıfı satır yüksekliğini var(--tw-leading, var(--text-lg--line-height)) biçiminde yazar; yani elemanda bir leading-* varsa onun değerini, yoksa boyutun kendi varsayılanını kullanır. Sonuç olarak text-lg leading-tight çiftinde CSS sırası ne olursa olsun satır yüksekliği 1.25 olur. Boyut ve satır yüksekliğini tek sınıfta birleştiren text-lg/7 yazımı da vardır; ayrıntısı font-size yazısında. Resmî sayfa ayrıca sayılı leading-* sınıflarının --spacing değişkenine bağlı olduğunu ve bu değişkeni temada değiştirebileceğinizi belirtir.

Harf aralığı: tracking-*

Harf aralığı sınıfları --tracking-* değişkenlerine başvurur ve değerler em cinsindedir; yani yazı boyutuyla orantılıdır:

Negatif değer için sınıfın başına eksi işareti koyarsınız. Derleme çıktısında -tracking-wide kuralı, tema değerini -1 ile çarpan bir calc() ifadesine dönüştü. Keyfi değer için tracking-[.2em], değişken için tracking-(--aralik) yazılır:

.-tracking-wide {
  --tw-tracking: calc(var(--tracking-wide) * -1);
  letter-spacing: calc(var(--tracking-wide) * -1);
}
.tracking-\[\.2em\] {
  --tw-tracking: .2em;
  letter-spacing: .2em;
}
.tracking-tight {
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}

Burada da bir ara değişken var: --tw-tracking. Kendi temanızda --text-tiny--letter-spacing gibi bir boyut eşi tanımladığınızda, boyut sınıfı harf aralığını var(--tw-tracking, ...) biçiminde yazar ve tracking-* sınıfı her zaman öncelik alır. Resmî sayfaya göre --tracking-* değişkenleriyle yeni adlar da ekleyebilirsiniz: --tracking-tightest: -0.075em; tanımı tracking-tightest sınıfını oluşturur. Büyük başlıklarda hafif negatif, küçük büyük harfli etiketlerde hafif pozitif bir aralık, aşağıdaki örnekte göreceğiniz gibi birbirini tamamlayan iki kalıptır.

Büyük, küçük harf dönüşümü ve italik

uppercase, lowercase, capitalize ve normal-case sınıfları text-transform özelliğini yazar. Derleme çıktısında normal-case kuralı text-transform: none oldu; yani "normal" kelimesi CSS'te none değerine karşılık gelir. Dönüşüm yalnızca görünümü değiştirir, HTML'deki metin olduğu gibi kalır. Bu nedenle bir başlığı büyük harfle göstermek için metni büyük harfle yazmak yerine uppercase kullanmak, aynı içeriği başka bir yerde normal yazımla göstermenize de imkân verir. capitalize her kelimenin ilk harfini büyütür; cümle düzeninde yalnızca ilk harfin büyük olmasını istiyorsanız bu sınıf uygun değildir.

İtalik için italic (font-style: italic) ve onu geri alan not-italic (font-style: normal) vardır. not-italic, miras alınan veya başka bir yerden gelen italik görünümü kapatmak ya da responsive bir geçiş kurmak için kullanılır: italic md:not-italic derlendiğinde .md\:not-italic kuralı 48rem ve üzeri için font-style: normal yazdı.

Alt çizgi ve dekorasyon: underline, decoration-*, underline-offset-*

Çizginin varlığı, rengi, stili, kalınlığı ve konumu beş ayrı CSS özelliğidir ve Tailwind her biri için ayrı bir sınıf ailesi sunar. v4.3.5 ile doğruladığımız değerler:

Kalınlık ve uzaklık sınıflarında sayı piksel olarak yorumlanır; boşluk ölçeğine bağlı değildir. decoration-2 2px, underline-offset-4 4px verir. Rengi ise palet renklerinden ve saydamlık modifier'ından alabilirsiniz. Resmî sayfadaki temel kalıp, alt çizgiyi yalnızca hover anında göstermektir: no-underline hover:underline. Daha zarif bir alternatif, çizgiyi her zaman göstermek ama rengini hover anında koyulaştırmaktır. Aşağıdaki bağlantıyı derledik:

<a class="underline decoration-sky-500/40 decoration-2 underline-offset-4 hover:decoration-sky-500" href="#">Belgeleri okuyun</a>

v4.3.5 ile derlenen CSS:

.underline {
  text-decoration-line: underline;
}
.decoration-sky-500\/40 {
  text-decoration-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in oklab, var(--color-sky-500) 40%, transparent);
  }
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .hover\:decoration-sky-500:hover {
    text-decoration-color: var(--color-sky-500);
  }
}

Bağlantı normalde yüzde 40 saydam, 2px kalınlığında ve metinden 4px uzakta bir çizgiyle görünür; fare üzerine geldiğinde çizgi tam renge kavuşur. Hover kuralının @media (hover: hover) içinde üretildiğine dikkat edin: medya sorgusu, fareyle üzerine gelme yeteneği bildirmeyen cihazlarda bu kuralın hiç uygulanmamasını sağlar. Hover davranışının ayrıntıları hover ve focus yazısında. Saydamlık modifier'ının mantığı opaklık yazısında anlatılıyor.

Temada satır yüksekliği ve harf aralığı değerlerini değiştirmek

Adlandırılmış satır yüksekliği değerleri tema değişkeni olduğu için hem ezilebilir hem de genişletilebilir. Aşağıdaki girişte varsayılan --leading-relaxed değerini 1.7 yaptık ve --leading-ferah adında yeni bir değer ekledik:

@theme {
  --leading-relaxed: 1.7;
  --leading-ferah: 1.8;
}

.leading-ferah {
  --tw-leading: var(--leading-ferah);
  line-height: var(--leading-ferah);
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

Çıktının tema bölümünde --leading-relaxed: 1.7 ve --leading-ferah: 1.8 yer aldı; yani leading-relaxed sınıfının adı aynı kaldı ama değeri değişti, leading-ferah ise yeni bir sınıf olarak kullanılabilir hale geldi. Aynı şey --tracking-* için de geçerlidir. Varsayılanı ezmek projenin tamamını etkiler: önceden leading-relaxed yazılmış her yer yeni değeri alır. Bu yüzden ekibin alıştığı adların anlamını değiştirmek yerine yeni bir ad eklemek çoğu zaman daha az sürpriz doğurur. Sayılı leading-* sınıfları ise --leading-* değil --spacing değişkenine bağlıdır; resmî sayfanın belirttiği gibi bu değişkeni değiştirmek tüm boşluk ölçeğini de etkiler. Ayrıntılar @theme direktifi yazısında.

Uygulamalı örnek: indirimli fiyat gösterimi

Üstü çizili eski fiyat ve yanında büyük yeni fiyat, dekorasyon sınıflarının renk ve saydamlıkla birlikte kullanımına iyi bir örnektir:

<p>
  <span class="text-gray-500 line-through decoration-red-500/60">1.200 TL</span>
  <b class="text-2xl font-bold">899 TL</b>
</p>

.text-gray-500 {
  color: var(--color-gray-500);
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-red-500\/60 {
  text-decoration-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
  }
}
/* (kısaltıldı) */

Eski fiyatın metni gri kalırken üzerindeki çizgi yüzde 60 saydam kırmızıdır; decoration- sınıfı olmasaydı çizgi metin rengini, yani griyi alırdı. Çizgi rengini metin renginden ayırabilmek, tek bir eleman üzerinde iki farklı görsel vurgu yapmanıza olanak tanır. Eski fiyatı ekran okuyucular için de anlamlı kılmak istiyorsanız görsel çizginin yanında erişilebilirlik yazısındaki sr-only ile gizli bir açıklama eklemeyi düşünebilirsiniz.

Uygulamalı örnek: büyük harfli etiket ve yaslanmış giriş

Kartların üstünde kullanılabilecek küçük, büyük harfli bir etiket ile hizalaması ekran genişliğine göre değişen bir giriş metnini birlikte yazalım:

<span class="text-xs font-semibold tracking-wider uppercase">Yeni özellik</span>
<p class="text-center md:text-start">Ortalanmış giriş</p>

.text-center {
  text-align: center;
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-wider {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.uppercase {
  text-transform: uppercase;
}
@media (width >= 48rem) {
  .md\:text-start {
    text-align: start;
  }
}

Etikette dört sınıf birlikte çalışıyor: text-xs 0.75rem boyut, font-semibold 600 kalınlık, tracking-wider 0.05em harf aralığı ve uppercase büyük harf. Küçük ve büyük harfli metinlerde harflerin birbirine yapışık görünmemesi için pozitif bir harf aralığı eklemek bu kalıbın özüdür; harf aralığı em cinsinden olduğu için etiketin boyutunu büyütseniz bile oran korunur. Bu kombinasyonu çok sık kullanıyorsanız @utility direktifiyle tek bir sınıfa toplayabilir ya da bir bileşen olarak saklayabilirsiniz.

Sık yapılan hatalar

• Kutuyu text-center ile ortalamaya çalışmak: text-center yalnızca satır içi içeriği hizalar; bir blok elemanın kendisini ortalamaz.
• Sayılı leading değerini oran sanmak: leading-6 1.5 oranı değil, 1.5rem sabit yüksekliktir. Oran istiyorsanız leading-normal veya leading-[1.5] yazın.
• Kalınlık sınıfını karıştırmak: Alt çizgi kalınlığı decoration-2 ile verilir; underline-2 diye bir sınıf yoktur. Benzer şekilde uzaklık için underline-offset-* kullanılır.
• Çizgi rengini ayrı sanmak: decoration-sky-500 tek başına çizgi çizmez; çizginin görünmesi için underline gibi bir çizgi sınıfı da gerekir.
• Harf aralığını piksel ile sabitlemek: tracking-[2px] gibi bir keyfi değer geçerlidir ama yazı boyutu değiştiğinde aynı kalır. Tema değerleri em cinsinden olduğu için boyutla birlikte ölçeklenir; responsive başlıklarda em tabanlı bir değer seçmek, her kırılımda ayrı bir tracking sınıfı yazma ihtiyacını azaltır.
• capitalize ile cümle düzeni beklemek: Her kelimenin ilk harfi büyür; başlık yazım kuralınız farklıysa metni HTML'de doğru yazın.

Sık Sorulan Sorular

leading-tight ile leading-none arasındaki fark ne?

leading-none satır yüksekliğini 1 yapar, yani yazı boyutuna eşitler. leading-tight v4.3.5 temasında 1.25 oranını verir; yani satır yüksekliği yazı boyutunun çeyrek fazlasıdır. 16px bir yazıda ilki 16px, ikincisi 20px satır yüksekliği demektir.

text-sm leading-7 yazdığımda hangisi kazanır?

leading-7. Boyut sınıfı satır yüksekliğini --tw-leading değişkeni üzerinden yazdığı için, leading-* sınıfı varsa onun değeri kullanılır.

Harf aralığını kendi değerimle tanımlayabilir miyim?

Evet. Tek seferlik için tracking-[.2em], kalıcı bir ad için @theme içinde --tracking-tightest: -0.075em; gibi bir değişken tanımlayın. Tema ad alanlarının tamamı @theme direktifi yazısında.

Alt çizgiyi metne daha yakın çekebilir miyim?

Evet, negatif uzaklık yazımı vardır. -underline-offset-2 derlendiğinde text-underline-offset: calc(2px * -1) verdi. Tam piksel değeri istiyorsanız underline-offset-[3px] gibi keyfi bir değer de kullanabilirsiniz; bu yazım text-underline-offset: 3px üretti. Aynı yaklaşım kalınlıkta da işler: decoration-[3px] çıktıda text-decoration-thickness: 3px oldu.

Hizalamayı bir CSS değişkenine bağlayabilir miyim?

Hizalama sınıfları sabit anahtar kelimeler yazar ve bir tema ad alanı kullanmaz; derleme çıktısındaki altı kuralın hiçbiri var() içermedi. Değişkene bağlı bir hizalama gerekiyorsa keyfi özellik yazımına başvurabilirsiniz; bu yazımın kuralları arbitrary values yazısında anlatılıyor. Çoğu durumda ise text-center md:text-start gibi responsive bir çift, değişkene ihtiyaç bırakmaz.

Alt çizgiyi yalnızca hover anında nasıl gösteririm?

no-underline hover:underline yazın. İlk sınıf text-decoration-line: none ile çizgiyi kaldırır, ikincisi fare üzerine geldiğinde underline değerini geri getirir. Klavye kullanıcılarının da aynı ipucunu görmesi için focus-visible:underline eklemeyi düşünebilirsiniz; odak varyantları hover ve focus yazısında anlatılıyor.

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 · Font size, weight, family · Truncate ve line-clamp · Hover ve focus · Renk paleti · Tailwind sıfırdan rehber