Modifier l’épaisseur du texte avec CSS peut être fastidieux et peu intuitif.
Cela entraîne souvent des styles désorganisés et un développement lent, surtout pour de grands projets.
Dans cet article, nous explorerons comment utiliser Tailwind pour simplifier la gestion du font-weight et améliorer votre workflow.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Utiliser Font-weight Tailwind efficacement
Pour rendre votre texte plus gras ou moins gras, vous allez devoir utiliser les classes Tailwind qui sont reliées à la propriété Font-weight CSS.
Pour les différents niveaux de gras, vous pouvez voir cela avec le code ci-dessous :
- Code :
<p class="font-thin">Épaisseur du texte</p>
<p class="font-extralight">Épaisseur du texte</p>
<p class="font-light">Épaisseur du texte</p>
<p class="font-normal">Épaisseur du texte</p><!--Ceci est l’épaisseur par défaut qui correspond a font-weight: 400; en code CSS-->
<p class="font-medium">Épaisseur du texte</p>
<p class="font-semibold">Épaisseur du texte</p>
<p class="font-bold">Épaisseur du texte</p>
<p class="font-extrabold">Épaisseur du texte</p>
<p class="font-black">Épaisseur du texte</p>
- Résultat :
Si vous êtes comme moi, et que vous étiez habitué à travailler avec les propriétés CSS. Vous pouvez voir à quelle valeur correspond la classe utilitaire grâce à l’extension qu’on a installée tout à l’heure dans VSCode.
Pour cela, il suffit de placer votre curseur au-dessus de la classe utilitaire et VSCode va afficher le code CSS derrière la classe utilitaire.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser le font-weight en Tailwind ?
Quelles classes Tailwind équivalent aux valeurs CSS de font-weight ?
Comment voir la valeur CSS derrière une classe Tailwind dans VSCode ?
Quels avantages offrent les classes Tailwind pour le font-weight ?
Comment Tailwind facilite-t-il le travail avec la typographie ?
Conclusion
En combinant Tailwind et VSCode, vous pouvez améliorer votre productivité et la qualité de vos designs. Quelle autre fonctionnalité Tailwind souhaitez-vous explorer davantage ?
