La documentation efficace est souvent négligée dans les projets de développement, créant des obstacles à la collaboration.
Sans une documentation claire, les développeurs peuvent se sentir perdus face à l’immense quantité de classes utilitaires disponibles, menant à des erreurs et à une inefficacité.
Cet article explore comment créer une documentation concise et utile avec Tailwind CSS, vous aidant à structurer votre travail et à rendre vos projets plus accessibles.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Avant de faire de la pratique, nous allons d’abord apprendre à créer une documentation. Certes, on est ici pour apprendre Tailwind CSS, mais ceci est un petit bonus pour vous, car il est important de savoir documenter son travail dans le milieu de la programmation.
Pourquoi créer une documentation ?
Vous êtes peut-être déjà tombé sur un fichier Readme quand vous avez installé un logiciel ou quand vous regardez un projet open source sur internet. Et bien, cela n’a pas été fait sans but précis, mais est forcément poussé par ces trois raisons :
- Révision :qui sert de référence, comme la documentation officielle deTailwind CSSque nous avons rencontrée avant. Cela permet de faire une révision en cas de blocage, car vous ne réussirez pas à mémoriser plus de500 classes utilitaires.
- Comprehension :cela aide l’utilisateur de mieux comprendre les concepts et à résoudre les problèmes en les expliquant de manière concise et accessible.
- Soutien aux autres développeurs :Une bonne documentation, comme un fichier Readme, permet aux autres développeurs de comprendre rapidement un projet afin qu’il puisse y contribuer par la suite. D’où l’importance des commentaires au sein des codes.
Créer notre propre documentation
Bien évidemment, pour nous, la documentation sera plus une sorte de révision pour ne pas nous perdre dans l’immense documentation officielle de Tailwind CSS .
Pour les ressources que nous allons utiliser, vous pouvez utiliser tout ce que vous voulez comme un simple carnet, un tableau Excel , un outil de prise de note en ligne comme Notion … bref il y a tout un tas de méthode, mais assurez-vous juste que :
Mais vu qu’on est dans un article pour un framework CSS alors on va utiliser HTML et CSS.
Pour retrouver les différentes classes utilitaires que nous vons vues, vous pouvez regarder le Code suivant pour commencer mais après c’est vous qui va remplir la documentation petit à petit :
- Code :
<body class="bg-stone-100">
<h1 class="text-center font-bold text-3xl mt-5 mb-3">Memo Tailwind CSS</h1>
<h2 id="formater-du-texte" class="rb-heading-index-4 text-center font-bold text-xl mb-3">Formater du texte</h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<div class="flex justify-between border-b-2">
<p>color</p>
<p>text-red-50 ... text-red-950</p>
</div>
<div class="flex justify-between border-b-2">
<p>font-family</p>
<p>font-sans, font-serif, font-mono</p>
</div>
<div class="flex justify-between border-b-2">
<p>font-size</p>
<p>text-xs, text-sm, text-base, text-lg, text-xl</p>
</div>
</section>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
Libre à vous de copier-coller le code quelque part dans votre ordinateur, d’y ajouter d’autres classes que vous avez vues par vous-mêmes et de personnaliser les couleurs, etc. Sachez juste que cela est votre documentation Tailwind et que nous allons l’utiliser par la suite.
III- Les propriétés pour formater du texte
Pour mettre en forme les textes avec Tailwind CSS, trois propriétés clés sont également utilisés comme nous venons de le constater :
- Font-weight :Cette propriété ajuste l’épaisseur du texte. Tailwind propose des classes commefont-thin,font-light,font-normal, jusqu’àfont-boldetfont-black, pour créer une hiérarchie visuelle en variant l’intensité du texte.
- Font-style :Elle permet de basculer entre le texte normal et l’italique avec les classesitalicetnot-italic, parfait pour mettre en avant certains mots ou citations.
- Letter-spacing :Cette propriété contrôle l’espacement entre les lettres. Les classestracking-tighter,tracking-normal,tracking-wide, etc., aident à ajuster cet espacement pour un texte plus ou moins aéré.
Ces trois propriétés offrent une grande flexibilité pour styliser vos textes de manière simple et rapide avec Tailwind CSS. Par suite, nous allons les ajouter dans la partie du code que nous avons vu tout à l’heure pour les ajouter dans notre documentation dans la section adéquate.
<div class="flex justify-between border-b-2">
<p>font-weight</p>
<p>font-light, font-normal, font-bold</p>
</div>
<div class="flex justify-between border-b-2">
<p>font-style</p>
<p>italic, not-italic</p>
</div>
<div class="flex justify-between border-b-2">
<p>letter-spacing</p>
<p>tracking-tighter, tracking-normal, tracking-widest</p>
</div>
Enfin, il est essentiel de noter que l’utilisation combinée de ces classes permet de créer un style typographique cohérent tout en s’adaptant à différents contextes. Par exemple, pour un titre percutant, vous pourriez utiliser font-black avec tracking-wide , tandis que pour le corps de texte, font-normal et tracking-normal apporteraient une lisibilité optimale.
Ici par exemple vous avez un callout que sera visible facilement par vos utilisateurs.
Les propriétés pour formater du texte
Les propriétés pour formater du texte
Pour mettre en forme les textes avec Tailwind CSS, trois propriétés clés sont également utilisés comme nous venons de le constater :
- Font-weight :Cette propriété ajuste l’épaisseur du texte. Tailwind propose des classes commefont-thin,font-light,font-normal, jusqu’àfont-boldetfont-black, pour créer une hiérarchie visuelle en variant l’intensité du texte.
- Font-style :Elle permet de basculer entre le texte normal et l’italique avec les classesitalicetnot-italic, parfait pour mettre en avant certains mots ou citations.
- Letter-spacing :Cette propriété contrôle l’espacement entre les lettres. Les classestracking-tighter,tracking-normal,tracking-wide, etc., aident à ajuster cet espacement pour un texte plus ou moins aéré.
Ces trois propriétés offrent une grande flexibilité pour styliser vos textes de manière simple et rapide avec Tailwind CSS. Par suite, nous allons les ajouter dans la partie du code que nous avons vu tout à l’heure pour les ajouter dans notre documentation dans la section adéquate.
<div class="flex justify-between border-b-2">
<p>font-weight</p>
<p>font-light, font-normal, font-bold</p>
</div>
<div class="flex justify-between border-b-2">
<p>font-style</p>
<p>italic, not-italic</p>
</div>
<div class="flex justify-between border-b-2">
<p>letter-spacing</p>
<p>tracking-tighter, tracking-normal, tracking-widest</p>
</div>
Enfin, il est essentiel de noter que l’utilisation combinée de ces classes permet de créer un style typographique cohérent tout en s’adaptant à différents contextes. Par exemple, pour un titre percutant, vous pourriez utiliser font-black avec tracking-wide , tandis que pour le corps de texte, font-normal et tracking-normal apporteraient une lisibilité optimale.
Ici par exemple vous avez un callout que sera visible facilement par vos utilisateurs.
Les propriétés pour formater du texte
Les propriétés pour formater du texte
Pour styliser efficacement les textes dans Tailwind CSS, trois autres propriétés sont souvent indispensables :
- Text-decoration :Cette propriété permet d’ajouter des lignes décoratives au texte, telles que le soulignement ou le barré. Avec Tailwind, les classesunderline,line-throughetno-underlinepermettent de souligner un texte, de le barrer ou de retirer toute décoration.
- Text-align :Pour aligner le texte à gauche, au centre, à droite, ou en justifié, Tailwind propose des classes intuitives :text-left,text-center,text-rightettext-justify. Elles sont idéales pour structurer le contenu et diriger le regard de l’utilisateur.
- Text-transform :Cette propriété modifie la casse des lettres pour un impact visuel supplémentaire. Les classes `uppercase`, `lowercase` et `capitalize` permettent respectivement de transformer le texte en majuscules, minuscules, ou en majuscules pour chaque mot. Ces transformations facilitent la hiérarchisation et donnent du caractère au texte.
Avec ces classes Tailwind, la personnalisation de vos textes devient simple, rapide et efficace. Ajoutons les dans la base de notre documentation pour ne pas les oublier par la suite.
<div class="flex justify-between border-b-2">
<p>text-decoration</p>
<p>underline, overline, line-through, no-underline</p>
</div>
<div class="flex justify-between border-b-2">
<p>text-align</p>
<p>text-left, text-center, text-right, text-justify</p>
</div>
<div class="flex justify-between border-b-2">
<p>text-transform</p>
<p>uppercase, lowercase, capitalize, normal-case</p>
</div>
- CodePen :
CodePen : Dans le CodePen suivant, vous retrouverez notre documentation sur le formatage de textes.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Pour résumer
Dans cette partie vous avez appris :
- À personnaliser les textes avec Tailwind CSS en modifiant les polices ( font-sans , font-serif , font-mono ) pour créer des styles adaptés à vos besoins.
- Utilisez les classes de taille de texte ( text-xs à text-9xl ) pour ajuster les dimensions des textes, ainsi que celles pour l’épaisseur ( font-thin à font-black ) afin de jouer sur les poids des caractères.
- Appliquez des effets comme l’italique ( italic , not-italic ) et ajustez l’espacement des lettres ( tracking-tighter à tracking-widest ) pour un rendu personnalisé.
- Gérez la décoration du texte avec les classes pour souligner, barrer ou retirer les traits ( underline , overline , line-through , no-underline ).
- Alignez et transformez vos textes grâce aux classes d’alignement ( text-left , text-right , text-center ) et de capitalisation ( uppercase , lowercase , capitalize , normal-case ).
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
Pourquoi est-il important de documenter avec Tailwind CSS ?
Comment créer une documentation personnelle avec Tailwind CSS ?
Quels sont les avantages de formater le texte avec Tailwind CSS ?
Quelles sont les propriétés de texte clés dans Tailwind CSS ?
Comment utiliser les classes Tailwind pour décorer le texte ?
Conclusion
En conclusion, la création d’une documentation efficace avec Tailwind CSS est essentielle pour optimiser votre flux de travail et collaborer efficacement avec d’autres développeurs. Quelles autres stratégies utilisez-vous pour améliorer votre documentation et la rendre plus accessible à votre équipe ?
