Cependant, cet article développera deux classes spécifiques qui sont les figures proportionnelles et les figures tabulaires. Ceux-ci sont utilisés pour styliser les valeurs numériques dans Tailwind et organiser et représenter les données numériques d'une manière attrayante pour la conception du document.
Cet article développera les chiffres proportionnels et tabulaires dans Tailwind CSS en utilisant le schéma suivant :
- Comment utiliser les chiffres proportionnels dans Tailwind CSS ?
- Comment utiliser les figures tabulaires dans Tailwind CSS ?
- Différence entre les chiffres proportionnels et tabulaires
Comment utiliser les chiffres proportionnels dans Tailwind CSS ?
La classe des chiffres proportionnels attribuera à l'élément une convention selon laquelle chaque nombre n'a pas la même largeur.
Syntaxe
La syntaxe d'utilisation des chiffres proportionnels dans Tailwind est la suivante :
< div classe = 'nombres-proportionnels' >
< div / >
Dans la syntaxe fournie ci-dessus, le « nombres proportionnels La classe ' doit être fournie à l'élément pour utiliser des chiffres proportionnels.
Voyons un exemple pratique de chiffres proportionnels.
Dans le code fourni ci-dessous, deux ' p ' les éléments sont contenus dans un ' div » élément qui utilise la classe des figures proportionnelles :
< div classe = ' Centre de texte à nombres proportionnels bg-slate-200 text-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
L'explication du code fourni ci-dessus est la suivante :
- Le ' div L'élément ' utilise le ' nombres proportionnels ' classe qui appliquera la propriété de chiffre proportionnel aux nombres.
- Le ' centre de texte ' La classe positionne le texte au centre de l'élément.
- Le ' bg-{couleur}-{numéro} ' La classe est responsable de la couleur d'arrière-plan de l'élément.
- Le ' texte-xl ' La classe fournit une taille de police extra grande pour le texte.
- Ensuite, deux ' p ' Des éléments sont créés contenant des nombres différents.
Sortir
On peut voir dans la sortie que les nombres dans la seconde ' p ' L'élément a une largeur légèrement plus grande que le premier. Cela est dû à la classe des figures proportionnelles :
Comment utiliser les figures tabulaires dans Tailwind CSS ?
Les figures tabulaires de Tailwind attribuent la convention à un élément où chaque nombre a la même largeur. Cela crée une représentation symétrique des nombres, semblable à un tableau.
Syntaxe
La syntaxe d'utilisation des figures tabulaires est la suivante :
< div classe = 'numéros tabulaires' >< div / >
Dans la syntaxe fournie ci-dessus, le « numéros tabulaires ' La classe est fournie à l'élément pour utiliser les figures tabulaires.
Voyons comment le ' numéros tabulaires » affectent les valeurs numériques dans un document HTML. Pour cette démonstration, deux « p ' avec des valeurs numériques sont créés et contenus dans un ' div ' élément qui utilise la classe des figures tabulaires :
< div classe = 'numéros tabulaires centre de texte bg-slate-200 texte-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
Dans le code ci-dessus, le ' numéros tabulaires ' Un cours est dispensé aux ' div 'élément qui attribuera le style des figures tabulaires à l'enfant' p ' éléments.
Sortir:
On peut voir dans la sortie ci-dessus que les valeurs numériques des deux éléments sont parfaitement alignées en raison de la même largeur des chiffres.
Informations bonus : différence entre les chiffres proportionnels et tabulaires dans Tailwind CSS
Regardons une démonstration qui différencie l'effet des classes de figures tabulaires et proportionnelles sur les valeurs numériques. Dans cette démonstration, les éléments se verront attribuer par défaut la classe des figures proportionnelles. Ensuite, en utilisant l'état de survol, les éléments se verront attribuer la classe des figures tabulaires :
< div classe = ' numéros proportionnels centre de texte bg-slate-200 texte-xl survol : numéros tabulaires » >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
On peut voir dans le code ci-dessus que le « div L'élément ' est fourni avec le ' nombres proportionnels », qui sera la convention par défaut que suivront les valeurs numériques.
De même, en raison du « survol : numéros tabulaires ', les valeurs numériques suivront la convention des figures tabulaires chaque fois que l'utilisateur passe le curseur de la souris sur l'élément 'div'.
Sortir
Dans la sortie donnée, la largeur des valeurs numériques change lorsque l'utilisateur passe la souris sur l'élément. Cela fournit la différence visuelle entre les chiffres proportionnels et tabulaires dans Tailwind :
Il s’agit de chiffres proportionnels et tabulaires dans Tailwind.
Conclusion
Pour utiliser des chiffres proportionnels dans Tailwind, le « nombres proportionnels 'La classe est utilisée. Les chiffres proportionnels utilisent la convention selon laquelle chaque valeur numérique a une largeur différente. Pour utiliser les figures tabulaires dans Tailwind, le « numéros tabulaires 'La classe est utilisée. Les figures tabulaires utilisent la convention selon laquelle chaque valeur numérique a la même largeur. Cet article a fourni la procédure d'utilisation des chiffres proportionnels et tabulaires dans Tailwind.