Acest articol oferă procedura pentru controlul familiei de fonturi a unui element folosind utilitatile Tailwind.
Cum să controlați familia de fonturi a unui element utilizând utilitarele Tailwind?
Pentru a controla o familie de fonturi a unui element în Tailwind, trebuie furnizat elementului următorul utilitar:
font- { familie de fonturi }
Există trei familii de fonturi implicite care pot fi setate folosind utilitarul furnizat mai sus. Acestea includ ' serif ', ' fără ', și ' mono ”.
Să folosim aceste familii de fonturi într-o demonstrație folosind „ font-{familie de fonturi} ” clasă pentru a vedea cum funcționează:
< div clasă = ' font-serif rotunjit-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Aceasta este o familie FONT-SERIF
< / div >
< div clasă = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Aceasta este o familie FONT-SANS
< / div >
< div clasă = „font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100” >
Aceasta este o familie FONT-MONO
< / div >
Explicația pentru codul de mai sus este următoarea:
- Există trei elemente div create folosind „ ” și sunt prevăzute cu diferite familii de fonturi.
- „ familie de fonturi} ” clasa va furniza familia de fonturi specificată textului din element.
- „ rotunjit-xl ” clasa va face colțurile elementului div rotunde.
- „ umbra-lg ” clasa va oferi o umbră mare elementului div.
- „ centru de text ” va alinia textul la centrul elementului.
- „ py-2 ' și ' meu-2 ” orele vor oferi ” 8px ” umplutură și margine în direcția de sus și de jos a elementului.
- „ bg-{culoare}-{număr} ” clasa este responsabilă pentru setarea fundalului elementului la culoarea specificată.
Din rezultat, este clar că fiecare element are o familie de fonturi diferită:
De asemenea, putem schimba dinamic familia de fonturi a unui element folosind funcția de hover. Pentru ilustrare, parcurgeți codul de mai jos:
< div clasă = „my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif” >Aceasta este o familie FONT-MONO în mod implicit< / div >În codul furnizat mai sus, „ hover: font-{family} ” utilitarul este responsabil pentru schimbarea familiei de fonturi a elementului de îndată ce cursorul mouse-ului trece peste el. Se poate vedea în rezultat că familia de fonturi a textului se schimbă atunci când utilizatorul trece cursorul mouse-ului peste el:
Este vorba despre controlul familiei de fonturi a unui element din Tailwind.
Concluzie
În Tailwind, unui element i se poate atribui o familie de fonturi folosind „ familie de fonturi} ” clasa. Există trei familii de fonturi implicite furnizate de Tailwind, adică „ fără ', ' serif ', și ' mono ”. De asemenea, utilizatorul poate schimba familia de fonturi a unui element la schimbarea stării unui element. Acest articol a furnizat procedura pentru controlul familiei de fonturi a unui element în Tailwind.