Tento článok poskytuje postup na ovládanie rodiny písiem prvku pomocou pomocných programov Tailwind.
Ako ovládať rodinu písiem prvku pomocou nástrojov Tailwind?
Ak chcete ovládať rodinu písiem prvku v Tailwinde, musíte prvku poskytnúť nasledujúci nástroj:
font- { rodina písiem }
Existujú tri predvolené rodiny písiem, ktoré je možné nastaviť pomocou vyššie uvedeného nástroja. Tie obsahujú ' serif ',' bez “ a „ mono “.
Použime tieto rodiny písiem v demonštrácii pomocou „ font-{rodina fontov} “, aby ste videli, ako to funguje:
< div trieda = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Toto je rodina FONT-SERIF
< / div >
< div trieda = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Toto je rodina FONT-SANS
< / div >
< div trieda = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Toto je rodina FONT-MONO
< / div >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- Existujú tri prvky div vytvorené pomocou „ “ a sú vybavené rôznymi rodinami písiem.
- ' font-{family} ” poskytne textu v prvku špecifikovanú rodinu písiem.
- ' zaoblené-xl ” zaokrúhli rohy prvku div.
- ' tieň-lg ” trieda poskytne elementu div veľký tieň.
- ' textové centrum ” zarovná text na stred prvku.
- ' py-2 “ a „ moja-2 “triedy poskytnú “ 8px ” odsadenie a okraj v hornom a spodnom smere prvku.
- ' bg-{color}-{number} ” trieda je zodpovedná za nastavenie pozadia prvku na zadanú farbu.
Z výstupu je zrejmé, že každý prvok má inú rodinu písiem:
Pomocou funkcie hover môžeme tiež dynamicky meniť rodinu písma prvku. Pre ilustráciu prejdite nasledujúcim kódom:
< div trieda = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Toto je štandardne rodina FONT-MONO< / div >Vo vyššie uvedenom kóde „ podržte kurzor myši: font-{family} ” nástroj je zodpovedný za zmenu rodiny písiem prvku hneď, ako nad ním prejde kurzor myši. Vo výstupe je vidieť, že rodina písiem textu sa zmení, keď používateľ na ňu umiestni kurzor myši:
To je všetko o ovládaní rodiny písiem prvku v Tailwinde.
Záver
V Tailwinde možno prvku priradiť rodinu písiem pomocou „ font-{family} ' trieda. Tailwind poskytuje tri predvolené rodiny písiem, napr. bez ',' serif “ a „ mono “. Používateľ môže tiež zmeniť rodinu písma prvku pri zmene stavu prvku. Tento článok poskytuje postup na ovládanie rodiny písiem prvku v Tailwinde.