Ovaj članak pruža postupak za kontrolu obitelji fontova elementa pomoću uslužnih programa Tailwind.
Kako kontrolirati obitelj fontova elementa pomoću pomoćnih programa Tailwind?
Kako bi se kontrolirala obitelj fontova elementa u Tailwindu, elementu mora biti dostavljen sljedeći uslužni program:
font- { obitelj fontova }
Postoje tri zadane obitelji fontova koje se mogu postaviti pomoću gore navedenog uslužnog programa. To uključuje ' serif ', ' bez ', i ' mono ”.
Upotrijebimo ove obitelji fontova u demonstraciji koristeći ' font-{obitelji fontova} ” da vidite kako radi:
< div razreda = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Ovo je obitelj FONT-SERIF
< / div >
< div razreda = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Ovo je obitelj FONT-SANS
< / div >
< div razreda = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Ovo je obitelj FONT-MONO
< / div >
Objašnjenje gornjeg koda je sljedeće:
- Postoje tri div elementa stvorena pomoću ' ” i opremljeni su različitim obiteljima fontova.
- ' font-{obitelj} ” pružit će navedenu obitelj fontova tekstu u elementu.
- ' zaobljeno-xl ” zaokružit će kutove elementa div.
- ' sjena-lg ” klasa će pružiti veliku sjenu elementu div.
- ' tekst-centar ” poravnat će tekst u središte elementa.
- ' py-2 ' i ' moj-2 ” nastava će pružiti “ 8 px ” ispuna i margina u smjeru vrha i dna elementa.
- ' bg-{boja}-{broj} ” klasa je odgovorna za postavljanje pozadine elementa na specificiranu boju.
Iz izlaza je jasno da svaki element ima različitu obitelj fontova:
Također možemo dinamički promijeniti obitelj fontova elementa pomoću funkcije lebdenja. Za ilustraciju, prođite kroz donji kod:
< div razreda = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Ovo je FONT-MONO obitelj prema zadanim postavkama< / div >U gore navedenom kodu, ' lebdi: font-{obitelj} ” uslužni program odgovoran je za promjenu obitelji fontova elementa čim pokazivač miša prijeđe iznad njega. U izlazu se može vidjeti da se obitelj fontova teksta mijenja kada korisnik prijeđe kursorom miša preko njega:
To je sve o kontroli obitelji fontova elementa u Tailwindu.
Zaključak
U Tailwindu, elementu se može dodijeliti obitelj fontova pomoću ' font-{obitelj} ” razred. Postoje tri zadane obitelji fontova koje nudi Tailwind, tj. ' bez ', ' serif ', i ' mono ”. Korisnik također može promijeniti obitelj fontova elementa nakon promjene stanja elementa. Ovaj članak pruža postupak za kontrolu obitelji fontova elementa u Tailwindu.