Bu makale, aşağıdaki taslağı kullanarak Tailwind'deki metni şekillendirmek için bir kılavuz sağlayacaktır:
- Metin Hizalama Sınıfını Kullan
- Metin İçeriğine Renk Sağlayın
- Farklı Yazı Tipi Aileleri Kullanın
- Metne Altı Çizili Süslemeler Sağlayın
- Metne Girintiler Sağlayın
Tailwind'de Metin Hizalama Sınıfı Nasıl Kullanılır?
Metin içeriğini şekillendirirken dekorasyon kadar metnin konumlandırılması da önemlidir. Metin düzgün şekilde hizalanmazsa web sayfasının tüm tasarımı tuhaf görünecektir. Tailwind'deki metni hizalamak için aşağıdaki sınıf kullanılır:
metin- { hizalama }
Hizalama seçenekleri şunları içerir: merkez ', ' sol ', ' Sağ ', Ve ' savunmak ”. Aşağıdaki gösteriyi kullanarak bu hizalamaların her birini anlayalım:
< P sınıf = 'metin merkezi bg-slate-200' > Bu örnek bir Metindir ve TEXT CENTER hizalaması ile sağlanmaktadır. < / P >
< br >
< P sınıf = ' metin-sağ bg-slate-200' > Bu örnek bir Metindir ve SAĞA METİN hizalaması ile sağlanmıştır. < / P >
< br >
< P sınıf = ' metin-sol bg-slate-200' > Bu örnek bir Metindir ve METİN SOL hizalaması ile sağlanmıştır. < / P >
< br >
< P sınıf = 'metni yasla bg-slate-200' > Bu örnek bir Metindir ve TEXT JUSTIFY hizalaması ile sağlanır. < / P >
Yukarıdaki kodun açıklaması şu şekildedir:
- Dört “ P ” öğeleri satır sonuyla oluşturulur ve ayrılır.
- Dört p öğesinin metni '' kullanılarak belirli bir konuma hizalanır. Metin hizalama} ' sınıf.
- “ bg-{renk}-{sayı} “sınıf her biri için arka plan rengini sağlar” P ” öğesi.
Çıktı
Aşağıdaki çıktıda hizalama sınıflarının her birinin metin konumunu nasıl etkilediği görülebilir. İlk öğenin metninin ortaya, ikincinin sağa, üçüncünün sola hizalandığını ve dördüncü öğenin iki yana yaslanmış metni gösterdiğini görebilirsiniz:
Tailwind'de Metin İçeriğine Renk Nasıl Sağlanır?
Renk, bir öğenin metin içeriğinin şekillendirilmesinde önemli bir rol oynar. Uygun renk seçilmezse metnin okunması zorlaşabilir. Bu, düzenin tasarımını olumsuz etkileyecektir. Tailwind'de bir metnin rengini ayarlamak için aşağıda verilen sınıfı kullanın:
metin- { renk } - { sayı }Yukarıda tanımlanan sözdiziminde, kullanıcının rengin adını ve ardından belirtilen rengin gölgesinden sorumlu olacak bir sayıyı sağlaması gerekir.
Aşağıda verilen gösteride üç ' P ” farklı metin rengi sınıfları kullanılarak stillendirilen öğeler:
< P sınıf = 'metin-mor-500 metin merkezi' > Bu Menekşe Renkli Bir Metindir < / P >< P sınıf = 'metin-kırmızı-500 metin merkezi' > Bu Kırmızı Renkli Bir Metindir < / P >
< P sınıf = 'metin-yeşil-500 metin merkezi' > Bu Yeşil Renkli Bir Metindir < / P >
Yukarıdaki kodda kullanılan sınıflar aşağıdaki gibidir:
- İlk ' P “ elemanı kullanılarak menekşe rengi sağlanır. metin-{renk}-{sayı} ' sınıf.
- İkinci ve üçüncü' P ” elemanlarına aynı yöntem kullanılarak kırmızı ve yeşil renkler verilmektedir.
- “ metin merkezi ” sınıfı, metin içeriğini öğenin merkezine konumlandırır.
Çıktı
Aşağıdaki çıktıdan, metnin varsayılan siyah renginin, text-{color}-{number} sınıfı kullanılarak belirtilen renklere değiştirildiği açıktır:
Tailwind'de Farklı Font Aileleri Nasıl Kullanılır?
Bir metin öğesinin yazı tipi, belirli bir metni vurgulamak için kullanılabilir. Her yazı tipinin kendine has özellikleri vardır. Tailwind'deki bir öğenin yazı tipini değiştirmek için aşağıdaki sınıfı kullanın:
yazı tipi- { aile }Tailwind üç varsayılan yazı tipi ailesi sağlar; örneğin: “ olmadan ', ' serif ', Ve ' mono ”. Bu yazı tipi ailelerinin her birinin farklı bir yazı tipi stili vardır.
Benzer şekilde “ yazı tipi-{ağırlık} ” sınıfı metni kalın, açık veya normal yapmak için kullanılabilir. Tailwind'deki farklı yazı tipi ailelerine yazı tipi ağırlığı sağlamak için bir gösteri kullanalım:
< P sınıf = 'yazı tipi-mono yazı tipi-ekstra kalın metin merkezi' > Bu, MONO Fontunda Ekstra Kalın Bir Metindir < / P >< P sınıf = 'yazı tipi-serif yazı tipi-yarı kalın metin merkezi' > Bu, SERIF Yazı Tipinde Yarı Kalın Bir Metindir < / P >
< P sınıf = 'yazı tipi-sans yazı tipi-ekstra hafif metin merkezi' > Bu, SANS Fontunda Ekstra Hafif Bir Metindir < / P >
Kodun açıklaması:
- Üç ' P öğeleri “mono”, “serf” ve “sans” yazı tipi aileleri tarafından “” kullanılarak sağlanır. font ailesi} ' sınıf.
- Benzer şekilde üç ' P ” elemanları “ olarak sağlanmıştır ekstra kalın ', ' yarı kalın ', ve ' ekstra ışık ” yazı tipi ağırlıklarını “ kullanarak yazı tipi-{ağırlık} ' sınıf.
- Bu öğelerin tümü “ metin merkezi Metni öğenin merkezine yerleştiren sınıf.
Çıktı
Verilen çıktı, her ' P ” öğesinin farklı bir yazı tipi ailesi ve yazı tipi ağırlıkları vardır:
Tailwind'deki Metne Alt Çizgi Süslemeleri Nasıl Sağlanır?
Metin öğeleri, farklı türlerde alt çizgi eklenerek de stillendirilebilir. Bu, metnin bir bölümünü vurgulamak için kullanılabilir. Bir metin öğesine alt çizgi sağlamak için aşağıdaki sınıf kullanılır:
altını çizmek dekorasyon- { stil }Kelime ' altını çizmek ” öğeye temel bir alt çizgi sağlar ve “ dekorasyon-{stil} ” sınıfı, alt çizgiye farklı stiller sağlamak için kullanılır. Aşağıda verilen gösterimi kullanarak bunu anlayalım:
< P sınıf = 'altı çizili dekorasyon-düz metin-merkez' > Bu Metnin Düz Bir Alt Çizgisi Var < / P >< P sınıf = 'altı çizili dekorasyon-çift metin merkezi' > Bu Metinde Çift Alt Çizgi Vardır < / P >
< P sınıf = 'altı çizili dekorasyon-dalgalı metin merkezi' > Bu Metnin Dalgalı Bir Alt Çizgisi Var < / P >
< P sınıf = 'dekorasyon noktalı metin merkezinin altını çiz' > Bu Metnin Noktalı Alt Çizgisi Var < / P >
Yukarıdaki kodda dört adet “ P 'tarafından sağlanan unsurlar' sağlam ', ' çift ', ' dalgalı ', Ve ' noktalı ” tarzının altını çiziyor.
Çıktı:
Aşağıdaki çıktıdan, öğelerin altı çizili farklı dekorasyon sınıfları kullanılarak stillendirildiği açıktır:
Tailwind'deki Metne Girintiler Nasıl Sağlanır?
Herhangi bir metin belgesinde, metin içeriğini biçimlendirmek için girintiler kullanılır. Tailwind ayrıca aşağıdaki sınıfı kullanarak metin içeriğine girinti sağlamak için varsayılan bir sınıf sağlar:
girinti { Genişlik }Yukarıda tanımlanan söz dizimindeki genişlik, metin içeriğine sağlanan girinti marjının boyutundan sorumludur.
İki metin öğesine farklı girinti değerleri atayarak stil uygulayalım ve sonucu görelim:
< P sınıf = 'girinti-4 py-12' > Bu örnek bir metin olup 'indent-4' sınıfı kullanılarak girintileme sağlanmıştır. < / P >< P sınıf = 'girinti-28' > Bu örnek bir metin olup 'indent-28' sınıfı kullanılarak girintileme sağlanmıştır. < / P >
Yukarıdaki kodda iki “ P ”genişliğin girintisi ile sağlanır” 4 ” & “ 28 ' sırasıyla. İlk eleman ayrıca “üst-alt dolgu ile sağlanır” s-12 ' sınıf.
Çıktı:
Aşağıdaki çıktıda, ikinci metin öğesinin, daha büyük girinti genişliğinden dolayı metnin başlangıcında daha büyük bir kenar boşluğuna sahip olduğu görülebilir:
Bu tamamen Tailwind'i kullanarak metni şekillendirmekle ilgilidir.
Çözüm
Tailwind, metin öğelerini şekillendirmek için çeşitli sınıflar sağlar. Metni Tailwind'de biçimlendirmek için kullanıcı şunları kullanabilir: metin-{renk}-{sayı} ', ' Metin hizalama} ', ' altı çizili dekorasyon-{stil} ', Ve ' girinti-{genişlik} ' sınıf. Bu makalede, Tailwind'deki çeşitli sınıfları kullanarak metni şekillendirmeye yönelik bir kılavuz sağlanmıştır.