Techniques pour Personnaliser les Bordures Tailwind

Personnaliser les bordures de vos éléments peut être complexe et chronophage.

Sans les bonnes techniques, vos designs risquent de manquer de cohérence et d’attrait visuel.

Découvrez comment Tailwind CSS simplifie la personnalisation des bordures avec ses classes utilitaires efficaces.

Table de matière

Personnaliser les bordures avec Tailwind CSS Formater du texte Formater une boîte Résumé des classes bordure Tailwind FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

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

Personnaliser les bordures avec Tailwind CSS

Précédemment, nous avons manipulé des classes qui permettent de personnaliser les bordures qui sont présentés ci-dessous :

border :pour ajouter une bordure sur les côtés et qui fait appel à trois classes utilitairesborder-{épaisseur}, border-{style} et border-{couleur}-{nuance}
border-radius :pour ajouter des arrondis qui a son équivalence en Tailwindrounded.

Vous devrez ajouter ceci dans votre tableau :

Enfin pour vérifier si vous avez bien rempli votre documentation, copier le code suivant dans votre IDE où cliquez sur le lien CodePen suivant :

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-3 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>
<h2 id="formater-une-boite" class="rb-heading-index-4 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>background-color</p>
<p>bg-red-50 ... bg-red-950</p>
</div>
<div class="flex justify-between border-b-2">
<p>width</p>
<p>w-4, w-1/2</p>
</div>
<div class="flex justify-between border-b-2">
<p>height</p>
<p>h-4, h-screen</p>
</div>
<div class="flex justify-between border-b-2">
<p>background-image (image de fond)</p>
<p>bg-[url('img/img.jpg')]</p>
</div>
<div class="flex justify-between border-b-2">
<p>background-image (dégradé)</p>
<p>bg-gradient-to-r from-cyan-500 to-blue-500</p>
</div>
<div class="flex justify-between border-b-2">
<p>margin</p>
<p>m-4, m-auto, mt-3, mr-3, mb-3, ml-3</p>
</div>
<div class="flex justify-between border-b-2">
<p>padding</p>
<p>p-4, pt-3, pr-3, pb-3, pl-3</p>
</div>
<div class="flex justify-between border-b-2">
<p>border</p>
<p>border, border-solid, border-red-950</p>
</div>
<div class="flex justify-between border-b-2">
<p>border-radius</p>
<p>rounded-2xl, rounded-full</p>
</div>
</section>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer>window.addEventListener('DOMContentLoaded', function() {</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 : cliquez sur le lien suivant pour voir la version finale du tableau concernant le formatage d’une boîte

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

Résumé des classes bordure Tailwind

Dans cette partie de l’article, vous avez pu retenir que :

• On peut changer la couleur du background en utilisant bg-couleur-{nuance} et définir les dimensions d’une boîte avec w- pour la largeur et h- pour la hauteur.

• Il existe d’autres moyens de personnaliser le background, comme ajouter une image avec bg-[url(‘…’)] ou créer un dégradé en utilisant bg-gradient-to , combiné avec les couleurs from- et to- .

• Les marges extérieures et intérieures peuvent être ajustées facilement avec m- pour les marges extérieures et p- pour le padding (marges intérieures).

• Vous pouvez également personnaliser les bordures avec border-{width} pour l’épaisseur, border-{style} pour le style, et border-couleur- pour la couleur. Les coins peuvent être arrondis à l’aide de la classe rounded- .

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 personnaliser les bordures avec Tailwind CSS?

Pour personnaliser les bordures avec Tailwind CSS, utilisez les classes utilitaires telles que border-{épaisseur}, border-{style}, et border-{couleur}-{nuance}. Ces classes vous permettent de définir l’épaisseur, le style (comme solid, dashed, etc.), et la couleur de la bordure, offrant une grande flexibilité pour adapter le design de vos éléments. Par exemple, pour ajouter une bordure solide rouge, vous pouvez utiliser border-2 border-solid border-red-500.

Quelle est la fonction de border-radius dans Tailwind CSS?

La propriété border-radius dans Tailwind CSS est utilisée pour arrondir les coins des éléments. Cela est possible grâce à la classe rounded, qui accepte différentes valeurs comme rounded-sm, rounded-md, ou rounded-full pour un arrondi complet. Cette fonctionnalité est idéale pour adoucir les bords et créer des designs plus fluides et esthétiques. Par exemple, pour un léger arrondi, vous pouvez appliquer la classe rounded-lg à votre élément.

Comment ajouter une image de fond avec Tailwind CSS?

Pour ajouter une image de fond avec Tailwind CSS, utilisez la classe bg-[url(‘img/img.jpg’)]. Cette classe permet d’appliquer une image de votre choix en arrière-plan d’un élément. Vous pouvez également combiner cette classe avec d’autres pour ajuster la position et la taille de l’image, garantissant un rendu optimal sur différents écrans. Assurez-vous que le chemin vers votre image est correct pour que l’image s’affiche correctement.

Comment créer un dégradé de fond avec Tailwind CSS?

Pour créer un dégradé de fond avec Tailwind CSS, utilisez la classe bg-gradient-to-r combinée avec from-cyan-500 et to-blue-500. Cette combinaison crée un dégradé horizontal allant du cyan au bleu, parfait pour ajouter de la profondeur et du dynamisme à votre design. L’orientation du dégradé peut être ajustée avec bg-gradient-to-t, bg-gradient-to-b, etc., pour s’adapter à l’esthétique souhaitée.

Comment ajuster les marges et le padding en Tailwind CSS?

En Tailwind CSS, les marges extérieures et intérieures sont ajustées avec les classes m- et p-. Utilisez m- pour les marges extérieures (par exemple, m-4 pour une marge de 1 rem) et p- pour le padding (par exemple, p-4 pour un padding de 1 rem). Vous pouvez également spécifier des marges ou paddings spécifiques pour chaque côté, comme mt-3 pour la marge supérieure. Cette modularité permet un contrôle précis de l’espacement autour et à l’intérieur de vos éléments.

Conclusion

En utilisant Tailwind CSS, vous pouvez transformer vos designs de bordures en éléments élégants et fonctionnels. Quelle technique allez-vous explorer pour personnaliser vos prochaines bordures?