La gestion de la capitalisation des textes est souvent fastidieuse avec du CSS classique.
Cela peut entraîner un manque de cohérence visuelle et une surcharge de code CSS.
Tailwind CSS propose des classes utilitaires de text-transformation qui simplifient grandement le processus.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Utiliser text-transformation Tailwind CSS
Pour la dernière partie sur la personnalisation des textes, nous allons utiliser les classes faisant à la propriété CSS text-transformation qui permet de gérer la capitalisation des textes. Nous avons 4 classes dans notre sac qui sont les suivants :
- uppercase :pour tout mettre en majuscule
- lowercase :pour tout mettre en minuscule
- capitalize :mettre uniquement le début de chaque mot en majuscule
- normal-case :celui utilisé par défaut et qui met en majuscule la première lettre d’une phrase.
Vous pouvez voir dans l’illustration suivant l’effet que ça rend sur le papier :
Il y a bien évidemment encore beaucoup de chose à raconter sur la personnalisation de texte avec Tailwind CSS, mais pour le moment ces bases-là nous suffisent amplement.
CodePen : Pour mettre en pratique tout ce qu’on vient d’apprendre, je vous propose de cliquer sur l’image ci-dessous pour vous rediriger vers une page CodePen où vous allez pouvoir pratiquer.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Une fois plus à l’aise avec les classes utilitaires, vous pouvez passer dans la prochaine partie sur la création de la documentation.
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
Quelles sont les classes de text-transformation disponibles dans Tailwind CSS ?
Comment utiliser la classe 'uppercase' en Tailwind CSS ?
Quelle est la différence entre 'capitalize' et 'uppercase' dans Tailwind CSS ?
Comment pratiquer l'utilisation de text-transformation avec Tailwind CSS ?
Pourquoi utiliser Tailwind CSS pour la personnalisation du texte ?
Conclusion
En utilisant les classes de text-transformation de Tailwind CSS, vous gagnez en flexibilité et efficacité dans la gestion de vos textes. Quelle autre fonctionnalité de Tailwind souhaitez-vous explorer pour améliorer vos projets web ?