Tässä artikkelissa käsitellään elementin kirjasinperheen hallintaa Tailwind-apuohjelmien avulla.
Kuinka hallita elementin kirjasinperhettä Tailwind-apuohjelmien avulla?
Elementin kirjasinperheen hallitsemiseksi Tailwindissä elementille on annettava seuraava apuohjelma:
fontti- { fonttiperhe }
On olemassa kolme oletuskirjasinperhettä, jotka voidaan määrittää käyttämällä yllä olevaa apuohjelmaa. Nämä sisältävät ' serif ', ' ilman ”, ja ” mono ”.
Käytetään näitä kirjasinperheitä esittelyssä käyttämällä ' kirjasin-{fonttiperhe} ”luokassa nähdäksesi kuinka se toimii:
< div luokkaa = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Tämä on FONT-SERIF-perhe
< / div >
< div luokkaa = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Tämä on FONT-SANS-perhe
< / div >
< div luokkaa = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Tämä on FONT-MONO-perhe
< / div >
Selitys yllä olevalle koodille on seuraava:
- Kolme div-elementtiä on luotu käyttämällä ' ” ja ne on varustettu erilaisilla kirjasinperheillä.
- ' font-{family} ”-luokka tarjoaa määritetyn kirjasinperheen elementin tekstille.
- ' pyöristetty-xl ” luokka tekee div-elementin kulmista pyöreät.
- ' shadow-lg ”-luokka tarjoaa suuren varjon div-elementille.
- ' tekstikeskus ' tasaa tekstin elementin keskelle.
- ' py-2 ' ja ' minun-2 'luokat tarjoavat' 8px ” täyte ja marginaali elementin ylä- ja alasuunnassa.
- ' bg-{väri}-{numero} ” luokka vastaa elementin taustan asettamisesta määritettyyn väriin.
Tulosteesta on selvää, että jokaisella elementillä on eri fonttiperhe:
Voimme myös muuttaa elementin kirjasinperhettä dynaamisesti käyttämällä hover-toimintoa. Havainnollistaaksesi, käy läpi alla oleva koodi:
< div luokkaa = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Tämä on oletuksena FONT-MONO-perhe< / div >Yllä annetussa koodissa ' hover: font-{family} ”-apuohjelma on vastuussa elementin kirjasinperheen muuttamisesta heti, kun hiiren osoitin siirtyy sen päälle. Tulosteessa näkyy, että tekstin kirjasinperhe muuttuu, kun käyttäjä vie hiiren osoittimen sen päälle:
Siinä on kyse Tailwindin elementin kirjasinperheen ohjaamisesta.
Johtopäätös
Tailwindissä elementille voidaan määrittää kirjasinperhe käyttämällä ' font-{family} ”luokka. Tailwind tarjoaa kolme oletuskirjasinperhettä eli ' ilman ', ' serif ”, ja ” mono ”. Käyttäjä voi myös vaihtaa elementin kirjasinperhettä elementin tilan muuttuessa. Tämä artikkeli on tarjonnut menettelyn elementin kirjasinperheen hallitsemiseksi Tailwindissä.