Questo articolo fornisce la procedura per controllare la famiglia di caratteri di un elemento utilizzando le utilità Tailwind.
Come controllare la famiglia di caratteri di un elemento utilizzando le utilità Tailwind?
Per controllare una famiglia di caratteri di un elemento in Tailwind, è necessario fornire all'elemento la seguente utilità:
font- { famiglia di font }
Esistono tre famiglie di caratteri predefinite che possono essere impostate utilizzando l'utilità fornita sopra. Questi includono ' serif ', ' senza ', E ' mono ”.
Usiamo queste famiglie di caratteri in una dimostrazione utilizzando il comando ' font-{famiglia di caratteri} ' lezione per vedere come funziona:
< div classe = ' font-serif arrotondato-xl shadow-lg testo-centro py-2 my-2 bg-verde-100 ' >
Questa è una famiglia FONT-SERIF
< / div >
< div classe = 'font-sans arrotondato-xl shadow-lg testo-centro py-2 my-2 bg-blu-100' >
Questa è una famiglia FONT-SANS
< / div >
< div classe = 'font-mono arrotondato-xl shadow-lg testo-centro py-2 my-2 bg-red-100' >
Questa è una famiglia FONT-MONO
< / div >
La spiegazione del codice precedente è la seguente:
- Sono presenti tre elementi div creati utilizzando il metodo ' ' e vengono forniti con diverse famiglie di caratteri.
- IL ' famiglia di font} La classe ' fornirà la famiglia di caratteri specificata al testo nell'elemento.
- IL ' arrotondato-xl ' renderà arrotondati gli angoli dell'elemento div.
- IL ' shadow-lg ' fornirà una grande ombra all'elemento div.
- IL ' centro-testo ' allineerà il testo al centro dell'elemento.
- IL ' py-2 ' E ' mio-2 'le lezioni forniranno' 8px 'imbottitura e margine nella direzione superiore e inferiore dell'elemento.
- IL ' bg-{colore}-{numero} La classe ' è responsabile dell'impostazione dello sfondo dell'elemento sul colore specificato.
Dall'output, è chiaro che ogni elemento ha una famiglia di caratteri diversa:
Possiamo anche modificare dinamicamente la famiglia di caratteri di un elemento utilizzando la funzione hover. A scopo illustrativo, passare attraverso il codice seguente:
< div classe = 'my-2 round-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Questa è una famiglia FONT-MONO per impostazione predefinita< / div >Nel codice sopra fornito, il ' passa il mouse: font-{famiglia} ' L'utilità è responsabile della modifica della famiglia di caratteri dell'elemento non appena il cursore del mouse passa sopra di esso. Nell'output si può vedere che la famiglia di caratteri del testo cambia quando l'utente posiziona il cursore del mouse su di essa:
Si tratta di controllare la famiglia di caratteri di un elemento in Tailwind.
Conclusione
In Tailwind, a un elemento può essere assegnata una famiglia di caratteri utilizzando il comando ' famiglia di font} ' classe. Esistono tre famiglie di caratteri predefinite fornite da Tailwind, ovvero ' senza ', ' serif ', E ' mono ”. L'utente può anche modificare la famiglia di caratteri di un elemento al cambio dello stato di un elemento. Questo articolo ha fornito la procedura per controllare la famiglia di caratteri di un elemento in Tailwind.