Bu makalede, Tailwind yardımcı programlarını kullanarak bir öğenin yazı tipi ailesini denetleme yordamı sağlanmaktadır.
Tailwind Yardımcı Programlarını Kullanarak Bir Öğenin Yazı Tipi Ailesini Nasıl Kontrol Edebilirim?
Tailwind'deki bir öğenin yazı tipi ailesini kontrol etmek için öğeye aşağıdaki yardımcı programın sağlanması gerekir:
yazı tipi- { font ailesi }
Yukarıda sağlanan yardımcı program kullanılarak ayarlanabilen üç varsayılan yazı tipi ailesi vardır. Bunlar arasında “ serif ', ' olmadan ', Ve ' mono ”.
Bu yazı tipi ailelerini “ yazı tipi-{yazı tipi ailesi} nasıl çalıştığını görmek için sınıf:
< div sınıf = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Bu bir FONT-SERIF ailesidir
< / div >
< div sınıf = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Bu bir FONT-SANS ailesidir
< / div >
< div sınıf = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Bu bir FONT-MONO ailesidir
< / div >
Yukarıdaki kodun açıklaması şu şekildedir:
- “ kullanılarak oluşturulan üç div öğesi vardır. ”ve farklı yazı tipi aileleriyle sağlanır.
- “ font ailesi} ” sınıfı, öğedeki metne belirtilen yazı tipi ailesini sağlayacaktır.
- “ yuvarlak-xl ” sınıfı div elemanının köşelerini yuvarlak hale getirecek.
- “ gölge-lg ” sınıfı div öğesine büyük bir gölge sağlayacaktır.
- “ metin merkezi ” metni öğenin merkezine hizalayacaktır.
- “ py-2 ' Ve ' benim-2 “sınıflar sağlayacaktır” 8 piksel ” elemanın üst ve alt yönünde dolgu ve kenar boşluğu.
- “ bg-{renk}-{sayı} ” sınıfı, öğenin arka planını belirtilen renge ayarlamaktan sorumludur.
Çıktıdan her öğenin farklı bir yazı tipi ailesine sahip olduğu açıktır:
Ayrıca vurgulu işlevini kullanarak bir öğenin yazı tipi ailesini dinamik olarak değiştirebiliriz. Örnek olarak aşağıdaki kodu inceleyin:
< div sınıf = 'my-2 rounded-xl bg-slate-100 py-2 metin merkezi yazı tipi-mono gölge-lg vurgulu:font-serif' >Bu, Varsayılan olarak bir FONT-MONO ailesidir< / div >Yukarıda verilen kodda “ fareyle üzerine gelin: yazı tipi-{aile} ” yardımcı programı, fare imleci üzerine geldiği anda öğenin yazı tipi ailesini değiştirmekten sorumludur. Çıktıda, kullanıcı fare imlecini üzerine getirdiğinde metnin yazı tipi ailesinin değiştiği görülebilir:
Bu tamamen Tailwind'deki bir öğenin yazı tipi ailesini kontrol etmekle ilgilidir.
Çözüm
Tailwind'de, bir öğeye “” kullanılarak bir yazı tipi ailesi atanabilir. font ailesi} ' sınıf. Tailwind tarafından sağlanan üç varsayılan yazı tipi ailesi vardır; örneğin ' olmadan ', ' serif ', Ve ' mono ”. Kullanıcı ayrıca bir öğenin durumunun değişmesi üzerine bir öğenin yazı tipi ailesini de değiştirebilir. Bu makale, Tailwind'deki bir öğenin yazı tipi ailesini kontrol etme prosedürünü sağlamıştır.