Aquest article proporciona el procediment per controlar la família de tipus de lletra d'un element mitjançant les utilitats Tailwind.
Com controlar la família de tipus de lletra d'un element mitjançant les utilitats Tailwind?
Per controlar una família de tipus de lletra d'un element a Tailwind, s'ha de proporcionar la següent utilitat a l'element:
Font- { família de tipus de lletra }
Hi ha tres famílies de tipus de lletra predeterminades que es poden configurar mitjançant la utilitat proporcionada anteriorment. Això inclou ' serif ”, “ sense ”, i “ mono ”.
Utilitzem aquestes famílies de tipus de lletra en una demostració fent servir el ' font-{família de tipus de lletra} ” classe per veure com funciona:
< div classe = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Aquesta és una família FONT-SERIF
< / div >
< div classe = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Aquesta és una família FONT-SANS
< / div >
< div classe = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Aquesta és una família FONT-MONO
< / div >
L'explicació del codi anterior és la següent:
- Hi ha tres elements div creats amb el ' ” i disposen de diferents famílies de tipus de lletra.
- El ' font-{família} ” La classe proporcionarà la família de tipus de lletra especificada al text de l'element.
- El ' arrodonit-xl ”La classe farà que les cantonades de l'element div siguin rodones.
- El ' ombra-lg ” La classe proporcionarà una gran ombra a l'element div.
- El ' centre de text ” alinearà el text al centre de l'element.
- El ' py-2 ' i ' el meu-2 ' Les classes proporcionaran ' 8 píxels ” encoixinat i marge en la direcció superior i inferior de l'element.
- El ' bg-{color}-{nombre} La classe s'encarrega d'establir el fons de l'element amb el color especificat.
A partir de la sortida, queda clar que cada element té una família de tipus de lletra diferent:
També podem canviar dinàmicament la família de tipus de lletra d'un element mitjançant la funció de passar el cursor. Per il·lustrar-ho, seguiu el codi següent:
< div classe = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Aquesta és una família FONT-MONO per defecte< / div >Al codi proporcionat anteriorment, el ' hover: font-{family} ” s'encarrega de canviar la família de tipus de lletra de l'element tan bon punt el cursor del ratolí passa per sobre. Es pot veure a la sortida que la família de tipus de lletra del text canvia quan l'usuari passa el cursor del ratolí per sobre:
Es tracta de controlar la família de tipus de lletra d'un element a Tailwind.
Conclusió
A Tailwind, es pot assignar a un element una família de tipus de lletra utilitzant el ' font-{família} ” classe. Hi ha tres famílies de tipus de lletra per defecte proporcionades per Tailwind, és a dir, ' sense ”, “ serif ”, i “ mono ”. L'usuari també pot canviar la família de tipus de lletra d'un element quan canvia l'estat d'un element. Aquest article ha proporcionat el procediment per controlar la família de tipus de lletra d'un element a Tailwind.