Le formatage de texte en CSS peut être fastidieux et long à réaliser.
Cela peut entraîner une perte de temps significative et un code difficile à maintenir, ce qui complique l’expérience de développement.
Avec Tailwind CSS, simplifiez le processus grâce à ses classes utilitaires, rendant le formatage plus rapide et plus intuitif. Cet article vous guide à travers un exercice pratique pour maîtriser cet outil.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Comme je l’ai dit précédement, c’est maintenant l’heure de tester vos connaissances avec un petit exercice. Ne vous inquiétez pas, il n’y a rien de bien méchant, je vous l’assure.
Exercice Tailwind CSS : Formatage de Texte
Pour ce premier exercice sur l’utilisation du framework Tailwind CSS , vous allez devoir modifier du texte. Voici un aperçu de ce que vous allez réaliser :
À première vue, ce n’est pas difficile, il vous suffit de créer un petit code HTML et de regarder dans votre memo . Essayez de tout faire par vous-même sans regarder le guide que je vais vous présenter ci-dessous.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Si vous ne savez pas ce que c’est le plugin Emmet , je vous recommande d’aller voir notre cours qui s’intitule Visual Studio Code et Emmet : Coder plus vite , vous verrez que ça vaut le détour.
Apprenez à coder rapidement les pages web à l'aide de Visual Studio Code et Emmet
Revenons maintenant à nos moutons, pour bien démarrez, vous allez avoir besoin de la base du code HTML que vous pouvez retrouver dans :
- Code :
<body>
<main>
<h1>Titre de niveau 1</h1>
<p>Résumé<br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="141nbsptitre-de-niveau-2" class="rb-heading-index-4">1) Titre de niveau 2</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="241nbsptitre-de-niveau-2" class="rb-heading-index-5">2) Titre de niveau 2</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<p>Lien :<a href="#">Ceci est un lien</a></p>
</main>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"56ffa977cf","url":"https:\/\/blog.alphorm.com\/exercice-pratique-tailwind-css-formatage-texte","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></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>
- CodePen :
CodePen : Cliquer sur l’image suivante pour vous rediriger vers la base de l’exercice.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Votre mission, si vous l’acceptez, serait de trouver les classes utilitaires pour donner ceci :
- Pour le titre de niveau 1 :il faudra le centrer, le colorer en orange, avec une épaisseur très grasse et une police de très grande taille (4 xl).
- Pour le premier paragraphe :mettre en italique le paragraphe sauf pour la balisespinque vous allez mettre en gras avec une police de taille un peu plus grande (lg).
- Pour les titres de niveau 2 :vous mettrez en gras, avec une couleur orange et une police de grande taille (2 xl).
- Pour les 2 prochains paragraphes :donner une taille un peu plus grande.
- Pour le dernier paragraphe :il faudra mettre en gras, avec une police plus petite sauf pourla balise « a »qu’il faudra donner une taillexlavec une ligne en dessous, une couleur bleue
et une épaisseur plus fine ( thin ).
Corriger l’Exercice avec Tailwind CSS
Nous allons décomposer la correction de notre exercice, et dans cette première partie, vous allez essayer d’obtenir quelque chose comme ceci :
Si vous avez bien suivi les instructions, votre code devrait ressembler à ceci :
<h1 class="text-center text-4xl font-black text-orange-700">Titre de niveau 1</h1>
<p class="italic"><span class="not-italic font-bold text-lg">Résumé</span><br>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error
est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="141nbsptitre-de-niveau-2" class="rb-heading-index-4">1) Titre de niveau 2</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error
est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="241nbsptitre-de-niveau-2" class="rb-heading-index-5">2) Titre de niveau 2</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error
est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<p>Lien :<a href="#">Ceci est un lien</a></p>
Cela était relativement simple, j’espère que vous êtes arrivé au même résultat que moi pour que l’on puisse avancer vers la deuxième partie de la correction.
Utilisation du Plugin Emmet en CSS
Bien, nous sommes arrivés dans cette deuxième partie, si vous avez bien suivis les consignes données lors de la présentation du projet, vous devrez obtenir un résultat qui ressemble à ceci :
Comparer ensuite ce que vous avez faites grâce au Code suivant en guise de correction :
- Code :
<body>
<main>
<h1 class="text-center text-4xl font-black text-orange-700">Titre de niveau 1</h1>
<p class="italic"><span class="not-italic font-bold text-lg">Résumé</span><br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="141nbsptitre-de-niveau-2" class="rb-heading-index-12 font-bold text-orange-600 text-2xl">1) Titre de niveau 2</h2>
<p class="text-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<h2 id="241nbsptitre-de-niveau-2" class="rb-heading-index-13 font-bold text-orange-600 text-2xl">2) Titre de niveau 2</h2>
<p class="text-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam soluta ipsam laboriosam officia dolor consequuntur, quisquam error est cumque adipisci voluptate molestias? Blanditiis enim minus et rem saepe.
Unde, id.</p>
<p class="font-sm font-bold">Lien : <a href="#" class="underline font-thin text-blue-600 text-xl">Ceci est un lien</a></p>
</main>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"56ffa977cf","url":"https:\/\/blog.alphorm.com\/exercice-pratique-tailwind-css-formatage-texte","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
- CodePen :
CodePen : Vous pouvez aussi regarder la correction dans le CodePen suivant si vous le souhaitez :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
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 Tailwind CSS pour le formatage de texte?
Qu'est-ce que le plugin Emmet et comment l'utiliser?
Quels sont les avantages d'utiliser Tailwind CSS?
Comment corriger un exercice de formatage de texte avec Tailwind CSS?
Comment intégrer des classes utilitaires dans un projet HTML?
‘. Cela permet de styliser rapidement votre contenu sans avoir besoin de fichiers CSS séparés.
Conclusion
En maîtrisant l’utilisation de Tailwind CSS pour le formatage de texte, vous ouvrez la porte à des designs plus rapides et intuitifs. Quelle autre fonctionnalité de Tailwind CSS souhaiteriez-vous explorer pour améliorer vos projets web?
