Tailwind CSS est un cadre bien connu qui est utilisé pour créer des pages Web ou des conceptions personnalisables et réactives. Il permet également aux utilisateurs de contrôler la disposition et l'espacement des éléments sans écrire de CSS personnalisé. Le rembourrage est l'espace entre le contenu de l'élément particulier et sa bordure. Parfois, les utilisateurs souhaitent appliquer la même quantité de rembourrage à chaque côté d'un élément. Tailwind fournit des classes utilitaires pour appliquer un rembourrage à tous les côtés d'un élément ou à des côtés spécifiques, tels que le haut, la droite, le bas ou la gauche.
Cet article illustrera la méthode pour ajouter un rembourrage à tous les côtés d'un élément dans Tailwind.
Comment ajouter du rembourrage à tous les côtés dans Tailwind ?
Pour ajouter un rembourrage à tous les côtés d'un élément particulier dans Tailwind, créez une structure HTML. Ensuite, utilisez la classe utilitaire 'p-
Syntaxe
< élément classe = 'p-
Remplacez la '
Exemple
Dans cet exemple, nous avons deux ' Dans la deuxième Sortir Pour ajouter un rembourrage à tous les côtés d'un élément dans Tailwind, la classe utilitaire 'p-
< corps >
< div classe = 'bg-rose-600 p-8 w-max' >
Rembourrage dans CSS vent arrière
div >
< Br >
< div classe = 'bg-sarcelle-600 p-14 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Ici, en premier
Selon la sortie ci-dessus, le rembourrage spécifié a été appliqué sur tous les côtés des deux conteneurs. Conclusion