W tym artykule opisano procedurę kontrolowania rodziny czcionek elementu za pomocą narzędzi Tailwind.
Jak kontrolować rodzinę czcionek elementu za pomocą narzędzi Tailwind?
Aby kontrolować rodzinę czcionek elementu w Tailwind, do elementu należy dostarczyć następujące narzędzie:
czcionka- { rodzina czcionek }
Istnieją trzy domyślne rodziny czcionek, które można ustawić za pomocą powyższego narzędzia. Obejmują one ' szeryf „”, „ bez ', I ' mononukleoza ”.
Użyjmy tych rodzin czcionek w demonstracji przy użyciu „ czcionka-{rodzina czcionek} ”, aby zobaczyć, jak to działa:
< div klasa = ' czcionka-serif zaokrąglona-xl cień-lg centrum tekstowe py-2 my-2 bg-green-100 ' >
To jest rodzina FONT-SERIF
< / div >
< div klasa = 'font-sans zaokrąglony-xl cień-lg centrum tekstowe py-2 my-2 bg-blue-100' >
To jest rodzina FONT-SANS
< / div >
< div klasa = „czcionka-mono zaokrąglona-xl cień-lg centrum tekstowe py-2 my-2 bg-red-100” >
To jest rodzina FONT-MONO
< / div >
Wyjaśnienie powyższego kodu jest następujące:
- Istnieją trzy elementy div utworzone za pomocą „ ” i są wyposażone w różne rodziny czcionek.
- „ rodzina czcionek} ” zapewni określoną rodzinę czcionek do tekstu w elemencie.
- „ zaokrąglone-xl ” class sprawi, że rogi elementu div będą zaokrąglone.
- „ cień-lg ” class zapewni duży cień elementowi div.
- „ centrum tekstowe ” wyrówna tekst do środka elementu.
- „ py-2 ' I ' mój-2 ”zajęcia zapewnią” 8 pikseli ” dopełnienie i margines w kierunku górnym i dolnym elementu.
- „ bg-{kolor}-{liczba} ” odpowiada za ustawienie tła elementu na określony kolor.
Z wyników jasno wynika, że każdy element ma inną rodzinę czcionek:
Możemy również dynamicznie zmieniać rodzinę czcionek elementu za pomocą funkcji hover. Dla ilustracji przejrzyj poniższy kod:
< div klasa = „my-2 rounded-xl bg-slate-100 py-2 tekst-centrum czcionka-mono cień-lg hover:font-serif” >Domyślnie jest to rodzina FONT-MONO< / div >W podanym powyżej kodzie, „ najedź kursorem: czcionka-{rodzina} ” odpowiada za zmianę rodziny czcionek elementu po najechaniu na niego kursorem myszy. Na wynikach widać, że rodzina czcionek tekstu zmienia się, gdy użytkownik najedzie na nią kursorem myszy:
Chodzi o kontrolowanie rodziny czcionek elementu w Tailwind.
Wniosek
W Tailwind do elementu można przypisać rodzinę czcionek za pomocą opcji „ rodzina czcionek} ' klasa. Tailwind udostępnia trzy domyślne rodziny czcionek, tj. „ bez „”, „ szeryf ', I ' mononukleoza ”. Użytkownik może również zmienić rodzinę czcionek elementu po zmianie stanu elementu. W tym artykule opisano procedurę kontrolowania rodziny czcionek elementu w Tailwind.