Personnaliser les boîtes en CSS peut être complexe et fastidieux.
Cela peut entraîner des frustrations, surtout pour les designers cherchant à créer des interfaces modernes et esthétiques rapidement.
Avec Tailwind CSS, vous pouvez personnaliser facilement et efficacement les boîtes en utilisant des classes utilitaires. Cet article vous guidera dans l’utilisation de Tailwind CSS pour transformer vos boîtes en éléments visuellement captivants.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Maintenant, nous allons commencer à aller au fond des choses, car c’est dans cette partie que nous allons pouvoir personnaliser les boîtes avec Tailwind CSS . Pour vous rafraichir la mémoire, une boîte est le type de balise « bloc » en HTML qui exige un saut de ligne à chaque déclaration d’une nouvelle balise (c’est par défaut, mais nous allons détourner cela tout à l’heure).
Personnaliser fond avec Tailwind CSS
Commençons par l’une des propriétés les plus célèbres en CSS qui est background-corps , on le sait tout que cela nous permet de gérer la couleur de fond d’une boîte. Et bien, avec Tailwind, nous avons déjà tout un arsenal de classe utilitaire dont vous avez la liste sur la documentation officielle.
On pourrait prendre comme exemple le code suivant :
Image de fond avec classes Tailwind
J’imagine que l’on connaît tous la propriété CSS background-image qui nous permet d’ajouter une image de fond. Toujours selon la documentation dans la partie background image , on peut ajouter une image en fond d’une boîte en appelant la classe suivante :
J’ai mis de côté une image, que j’ai mise dans un dossier pour que vous puissiez voir un exemple concret :
- Voici l’emplacement de la photo :
- Notre code HTML dans le fichierindex.html :
<main>
<div class= »h-56 w-full bg-[url(‘img/paysage.jpg’)] »></div>
<!–On ajoute une dimension à l’image–>
</main>
- Et le résultat obtenu :
Tadam ! Pour améliorer un peut le rendu, car là on ne voit pas grand-chose par rapport à l’image originale, on a quelques classes que vous pouvez voir dans le tableau suivant :
- bg-no-repeat :pour éviter que notre background se répète si l’on n’a pas rempli tout l’espace
- bg-cover :pour couvrir tout l’espace
- bgsanté :pour la position de l’image (vous avez bien sûr la possibilité de choisir d’autres directions commebg-left,bg-topet même de faire une combinaison commebg-right-bottom)
Donc j’enlève la répétition, j’essaie de couvrir tout l’espace et je centre mon background pour obtenir ceci :
Là, c’est mieux n’est-ce pas ? Je vous assure que c’est la même photo, pas de triche. Bien sûr, il y a encore des choses intéressantes comme background, attachement et tout, mais je vous laisse le soin de voir cela.
Dégradé avec Tailwind CSS
Pour faire des dégradés avec Tailwind CSS , il vous faut deux choses :
- La direction du dégradé
- Les couleurs que vous allez utiliser
Bien sûr, vous avez déjà des classes pour gérer tout cela. Pour la direction c’est facile, il vous suffit juste de changer le suffixe de la classe bg-gradient-to selon la direction que vous voulez, comme vous le montre l’image :
Après avec les couleurs, ça marche pareil qu’avec la couleur des textes et du background c’est-à-dire la couleur suivie de la nuance, sauf qu’il va falloir définir deux couleurs :
- from :ajouter le préfixefromavant la couleur choisie pour choisir la couleur de départ
- to :c’est le préfixe à ajouter pour choisir la deuxième couleur afin de créer le gradient
Je vous invite à voir l’exemple ci-dessous pour une appréhension du concept :
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 ajouter un fond à une boîte avec Tailwind CSS ?
Comment ajouter une image de fond à une boîte en utilisant Tailwind CSS ?
Comment créer un dégradé de fond avec Tailwind CSS ?
Quelles sont les classes utilitaires pour gérer les fonds en Tailwind CSS ?
Comment éviter que l'image de fond se répète en Tailwind CSS ?
Conclusion
En explorant ces techniques, votre maîtrise de Tailwind CSS pour la personnalisation des boîtes ne cessera de croître. Quel aspect de Tailwind CSS souhaitez-vous explorer ensuite pour enrichir vos compétences en design ?