Tento článek poskytuje postup pro ovládání rodiny písem prvku pomocí nástrojů Tailwind.
Jak ovládat rodinu písem prvku pomocí nástrojů Tailwind?
Aby bylo možné ovládat rodinu písem prvku v Tailwindu, musí být prvku poskytnut následující nástroj:
písmo- { rodina písem }
Existují tři výchozí rodiny písem, které lze nastavit pomocí výše uvedeného nástroje. Tyto zahrnují ' patka ',' bez ', a ' mono “.
Použijme tyto rodiny písem v demonstraci pomocí „ font-{rodina písem} “, abyste viděli, jak to funguje:
< div třída = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Toto je rodina FONT-SERIF
< / div >
< div třída = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Toto je rodina FONT-SANS
< / div >
< div třída = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Toto je rodina FONT-MONO
< / div >
Vysvětlení výše uvedeného kódu je následující:
- Existují tři prvky div vytvořené pomocí „ “ a jsou vybaveny různými rodinami písem.
- ' font-{family} Třída ” poskytne textu v prvku zadanou rodinu písem.
- ' zaoblené-xl ” zakulatí rohy prvku div.
- ' stín-lg Třída ” poskytne prvku div velký stín.
- ' textové centrum ” zarovná text na střed prvku.
- ' py-2 ' a ' můj-2 “třídy poskytnou” 8px ” odsazení a okraj v horním a dolním směru prvku.
- ' bg-{barva}-{číslo} Třída ” je zodpovědná za nastavení pozadí prvku na zadanou barvu.
Z výstupu je zřejmé, že každý prvek má jinou rodinu písem:
Můžeme také dynamicky měnit rodinu písem prvku pomocí funkce hover. Pro ilustraci projděte níže uvedený kód:
< div třída = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Toto je standardně rodina FONT-MONO< / div >Ve výše uvedeném kódu je „ umístěte kurzor myši: font-{family} ” nástroj je zodpovědný za změnu rodiny písem prvku, jakmile na něj najede kurzor myši. Ve výstupu je vidět, že rodina písem textu se změní, když nad ní uživatel najede kurzorem myši:
To je vše o ovládání rodiny písem prvku v Tailwindu.
Závěr
V Tailwindu lze prvku přiřadit rodinu písem pomocí „ font-{family} “třída. Tailwind poskytuje tři výchozí rodiny písem, tj. bez ',' patka ', a ' mono “. Uživatel může také změnit rodinu písem prvku při změně stavu prvku. Tento článek poskytuje postup pro ovládání rodiny písem prvku v Tailwindu.