Blog Alphorm Logo de blog informatique spécialisé en technologie et solutions IT
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Formatage avec Tailwind CSS: Astuces et Classes
Agrandisseur de policeAa
Blog AlphormBlog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Search
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Suivez-nous
© Alphorm 2024 - Tous droits réservés
Développement

Formatage avec Tailwind CSS: Astuces et Classes

L'Équipe Alphorm Par L'Équipe Alphorm 2 janvier 2025
Partager
Partager

Le formatage du texte et des éléments est souvent complexe en CSS.

Cela peut entraîner un code désorganisé et des incohérences dans le design, rendant le développement fastidieux.

Tailwind CSS simplifie ce processus avec ses classes utilitaires, facilitant la création de designs harmonieux et maintenables.

Table de matière
Formater du texteFormater une boîteFormatage Tailwind CSS : style de boîtesFAQConclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Découvrir cette formation
Illustration d'un livre sur la documentation Tailwind CSS

À présent qu’on a la connaissance, il est temps de noter tout cela dans notre mémo pour enrichir notre documentation. Nous allons donc reprendre la base de notre documentation et d’ajouter un nouveau tableau concernant le formatage d’une boîte :

  • Code :
				
					
 <body class="bg-stone-100">

<h1 class="text-center font-bold text-3xl mt-5 mb-3">Mémo Tailwind CSS</h1>
<h2 id="formater-du-texte" class="rb-heading-index-2 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 mb-10">
<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>
<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>
<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>
</section>
<! --Ajouter un nouveau tableau-->
<h2 id="formater-une-boite" class="rb-heading-index-3 text-center font-bold text-xl mb-3">Formater une boîte</h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<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> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
<div class="flex justify-between border-b-2">
<p> Propriété </p>
<p> class </p>
</div>
</section>
<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":"a38001b5a8","url":"https:\/\/blog.alphorm.com\/formatage-tailwind-css-astuces-classes","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 : Vous pouvez retrouver la base de la documentation via le lien ci-dessous :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formatage Tailwind CSS : style de boîtes

Tout à l’heure, nous avons vu en premier lieu les propriétés CSS suivants :

  • background-color :qui a son équivalence en Tailwind avec la classebg-{couleur}-{nuance}
  • width :qui peut être représenté par unevaleur exacte, unevaleur fractionnaireet unevaleur littérale.
  • height :pour la hauteur ou la longueur si vous voulez qui est aussi représenté de la même manière quewidth.
Exemple de div avec Tailwind CSS

Je précise ici que si vous voyez ceci {couleur}, cela veut dire que la couleur est une variable. Ça sera notre petite convention pour ce chapitre.

Nous allons donc prendre des exemples et les ajouter dans notre tableau comme ceci :

Tableau CSS Tailwind: formatage boîte

Vous avez le code, vous avez les connaissances requises en HTML donc je vous laisse remplir le tableau. Mais ne vous inquiétez pas, à la fin de ce chapitre, je vous donnerai la version finale du mémo pour le formatage d’une boîte.

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.

Démarrer gratuitement
illustration processus de paiement en ligne avec étapes claires et convivialité

FAQ

Comment formater du texte avec Tailwind CSS?
Pour formater du texte avec Tailwind CSS, utilisez des classes spécifiques telles que ‘text-red-50’ pour la couleur, ‘font-bold’ pour le poids de la police, et ‘text-center’ pour l’alignement. Tailwind CSS offre une approche modulaire qui vous permet de personnaliser le style du texte de manière granulaire en appliquant des classes directement sur les éléments HTML. Cela simplifie le processus de stylisation et vous donne un contrôle total sur l’apparence du texte.
Quelles sont les classes Tailwind CSS pour les propriétés de base?
Les classes Tailwind CSS pour les propriétés de base incluent ‘bg-{couleur}-{nuance}’ pour la couleur de fond, ‘w-{valeur}’ pour la largeur, et ‘h-{valeur}’ pour la hauteur. Ces classes vous permettent de définir rapidement et efficacement le style de vos éléments en utilisant des noms de classes lisibles et intuitifs. Tailwind CSS facilite l’application de styles complexes sans écrire de CSS personnalisé, rendant le développement front-end plus rapide et plus cohérent.
Comment utiliser Tailwind CSS pour le style de boîtes?
Pour styliser des boîtes avec Tailwind CSS, utilisez des classes telles que ‘border-2′ pour les bordures, ’rounded-xl’ pour les coins arrondis, et ‘p-3’ pour le padding. Ces classes permettent de construire des interfaces utilisateur modernes et esthétiques avec un minimum d’effort. En appliquant ces classes directement sur vos balises HTML, vous pouvez créer des designs réactifs et cohérents à travers différentes tailles d’écran sans écrire de CSS additionnel.
Quelle est l'équivalence Tailwind CSS pour 'background-color'?
En Tailwind CSS, l’équivalence pour ‘background-color’ est la classe ‘bg-{couleur}-{nuance}’, où ‘couleur’ peut être une couleur comme ‘blue’, ‘red’, etc., et ‘nuance’ un nombre représentant l’intensité. Cette approche modulaire permet de changer rapidement la couleur de fond d’un élément, en utilisant des valeurs prédéfinies qui assurent une harmonie visuelle et une cohérence dans l’ensemble de votre design.
Comment organiser une documentation avec Tailwind CSS?
Pour organiser une documentation avec Tailwind CSS, créez des sections structurées utilisant des titres et des listes pour répertorier les classes et leurs propriétés associées. Par exemple, vous pouvez regrouper des styles de texte et de boîtes dans des tableaux bien formatés, facilitant ainsi la référence et l’application. L’utilisation de CodePen ou d’autres outils de sandboxing peut également aider à visualiser et tester les styles en temps réel, rendant la documentation interactive et pratique.

Conclusion

En maîtrisant le formatage avec Tailwind CSS, vous pouvez créer des designs élégants et cohérents sans effort. Quels autres outils utilisez-vous pour améliorer vos interfaces utilisateur?

ÉTIQUETÉ : Tailwind CSS
Facebook
Twitter
LinkedIn
Email
WhatsApp
Par L'Équipe Alphorm
Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.

Derniers Articles

  • Techniques pour gérer les fichiers texte en C#
  • Créer et lire un fichier CSV avec C#
  • JSON : Comprendre et Utiliser Efficacement
  • Créer une Base SQLite dans C#
  • Lecture des données SQLite simplifiée
Laisser un commentaire Laisser un commentaire

Laisser un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

Blog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Formatage avec Tailwind CSS: Astuces et Classes

© Alphorm - Tous droits réservés