Ta članek podaja postopek za nadzor družine pisav elementa s pomočjo pripomočkov Tailwind.
Kako nadzorovati družino pisav elementa s pripomočki Tailwind?
Za nadzor družine pisav elementa v Tailwindu je treba elementu zagotoviti naslednji pripomoček:
pisava- { družina pisav }
Obstajajo tri privzete družine pisav, ki jih je mogoče nastaviti z zgoraj navedenim pripomočkom. Tej vključujejo ' serif ', ' brez «, in » mono ”.
Uporabimo te družine pisav v predstavitvi z uporabo ' pisava-{družina pisav} ”, da vidite, kako deluje:
< div razred = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
To je družina FONT-SERIF
< / div >
< div razred = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
To je družina FONT-SANS
< / div >
< div razred = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
To je družina FONT-MONO
< / div >
Razlaga zgornje kode je naslednja:
- Obstajajo trije elementi div, ustvarjeni z uporabo ' ” in so na voljo z različnimi družinami pisav.
- ' pisava-{družina} ” bo besedilu v elementu zagotovil navedeno družino pisav.
- ' zaobljeno-xl ” naredi vogale elementa div okrogle.
- ' shadow-lg ” bo zagotovil veliko senco elementu div.
- ' besedilno središče ” poravna besedilo na sredino elementa.
- ' py-2 « in » moj-2 »razredi bodo zagotovili« 8 slikovnih pik ” oblazinjenje in rob v zgornji in spodnji smeri elementa.
- ' bg-{barva}-{številka} ” je odgovoren za nastavitev ozadja elementa na določeno barvo.
Iz izhoda je jasno, da ima vsak element drugačno družino pisav:
Prav tako lahko dinamično spremenimo družino pisav elementa s funkcijo lebdenja. Za ponazoritev si oglejte spodnjo kodo:
< div razred = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >To je privzeto družina FONT-MONO< / div >V zgoraj navedeni kodi je » hover: pisava-{družina} ” je odgovoren za spreminjanje družine pisav elementa takoj, ko se kazalec miške pomakne nad njim. V izhodu je razvidno, da se družina pisav besedila spremeni, ko uporabnik premakne miškin kazalec nad njim:
To je vse o nadzoru družine pisav elementa v Tailwindu.
Zaključek
V Tailwindu lahko elementu dodelite družino pisav z uporabo ' pisava-{družina} ” razred. Obstajajo tri privzete družine pisav, ki jih ponuja Tailwind, tj. brez ', ' serif «, in » mono ”. Uporabnik lahko spremeni tudi družino pisav elementa ob spremembi stanja elementa. Ta članek ponuja postopek za nadzor družine pisav elementa v Tailwindu.