Cet article fournit la procédure pour contrôler la famille de polices d'un élément à l'aide des utilitaires Tailwind.
Comment contrôler la famille de polices d'un élément à l'aide des utilitaires Tailwind ?
Afin de contrôler une famille de polices d'un élément dans Tailwind, l'utilitaire suivant doit être fourni à l'élément :
Police de caractère- { famille de polices }
Il existe trois familles de polices par défaut qui peuvent être définies à l'aide de l'utilitaire fourni ci-dessus. Ceux-ci inclus ' empattement ', ' sans ', et ' mono ».
Utilisons ces familles de polices dans une démonstration en utilisant le ' font-{famille de polices} ' cours pour voir comment ça marche :
< div classe = ' font-serif arrondi-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Ceci est une famille FONT-SERIF
< / div >
< div classe = ' font-sans arrondi-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Ceci est une famille FONT-SANS
< / div >
< div classe = 'font-mono arrondi-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Ceci est une famille FONT-MONO
< / div >
L'explication du code ci-dessus est la suivante :
- Il y a trois éléments div créés à l'aide du ' » et sont fournis avec différentes familles de polices.
- Le ' famille de polices} ' La classe fournira la famille de polices spécifiée au texte de l'élément.
- Le ' arrondi-xl ' La classe arrondira les coins de l'élément div.
- Le ' ombre-lg ' La classe fournira une grande ombre à l'élément div.
- Le ' centre de texte ' alignera le texte au centre de l'élément.
- Le ' py-2 ' et ' mon-2 « les cours apporteront » 8px ' remplissage et marge dans les directions supérieure et inférieure de l'élément.
- Le ' bg-{couleur}-{numéro} ' La classe est chargée de définir l'arrière-plan de l'élément sur la couleur spécifiée.
D'après le résultat, il est clair que chaque élément a une famille de polices différente :
Nous pouvons également modifier dynamiquement la famille de polices d'un élément à l'aide de la fonction de survol. Pour illustration, parcourez le code ci-dessous :
< div classe = 'my-2 arrondi-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Il s'agit d'une famille FONT-MONO par défaut< / div >Dans le code fourni ci-dessus, le « survol : font-{famille} ' L'utilitaire se charge de changer la famille de polices de l'élément dès que le curseur de la souris le survole. On peut voir dans le résultat que la famille de polices du texte change lorsque l'utilisateur passe le curseur de la souris dessus :
Il s’agit de contrôler la famille de polices d’un élément dans Tailwind.
Conclusion
Dans Tailwind, un élément peut se voir attribuer une famille de polices à l’aide du « famille de polices} ' classe. Il existe trois familles de polices par défaut fournies par Tailwind, à savoir « sans ', ' empattement ', et ' mono ». L’utilisateur peut également modifier la famille de polices d’un élément lors du changement d’état d’un élément. Cet article a fourni la procédure de contrôle de la famille de polices d'un élément dans Tailwind.