La personnalisation de votre page web peut être complexe et chronophage.
Une mise en forme désordonnée peut nuire à l’expérience utilisateur et à l’esthétique globale de votre site.
Cet article vous guide dans l’utilisation des classes utilitaires de Tailwind CSS pour simplifier et améliorer la personnalisation de votre site.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Poursuivons le projet de ce guide sur la personnalisation de notre page web. Cette fois, nous allons commencer à appliquer les premières classes utilitaires de Tailwind directement dans la structure HTML, en procédant étape par étape pour chaque section de la page.
Styliser le header
Pour que nous arrivions à obtenir le résultat suivant :
Il faudra accomplir les tâches dans la liste suivante étape par étape :
- Pour leheader :il faudra mettre la couleur du background sur#34495eet lui donner une hauteur de150pxavec les valeurs arbitraires.
- Pour la balise<h1> :afin de le centrer comme sur l’image, il faudra déclarer le header en tant que conteneurflexpuis d’aligner ces éléments sur l’axe principal et l’axe secondaire.
Ne pas oublier de colorer le texte en #f1c40f, de rendre majuscules les premières lettres de chaque mot avec une taille de 2rem (toujours avec les valeurs arbitraires).
Colorer le background de la barre de navigation
On passe maintenant à la barre de navigation, où nous n’allons pas faire de grand changement pour le moment mais juste de placer la couleur du background en #c0392b .
Styliser la section du formulaire
Pour que nous puissions avoir le résultat escompté, il faut d’abord commencer par différencier la couleur du background avec celui du formulaire comme ceci :
Les modifications que vous allez apporter sont écrites dans la liste suivante :
- Le background de la balise<body> :pour commencer il faut changer la couleur du background sur#bdc3c7
- Pour la<section> :colorer ce dernier en#ecf0f1puis mettre la largeur sur50%,ajouter une marge extérieureautosur l’axe horizontal afin de centrer la balise, placer la balise à80pxau-dessous du header et enfin pour bien aérer le tout, ajouter un padding de 20px.
Vous devriez avoir ce résultat après ces modifications :
Styliser le footer
Nous allons terminer cette première mise en forme de notre partie footer avant d’entrer en détail dans la barre de navigation et le formulaire.
Cette fois-ci, votre mission sera de :
- Changer la couleur du background comme celui du header #34495e
- Ajouter une hauteur de 100px et une largeur 100% car nous allons le placer en position absolue pour pouvoir le coller sur le bas de la page
- Indiquer son emplacement en utilisant la classe bottom-0
- Centrer la balise h4 avec la même technique qu’on a utilisée dans le header
Ensuite pour finaliser le tout, vous devrez modifier un peu le paragraphe dans le footer en mettant sa couleur en #ecf0f1 et sa taille sur 0.8rem.
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 styliser le header avec Tailwind CSS ?
Comment appliquer un background à la barre de navigation ?
Quelle est la méthode pour styliser la section du formulaire ?
Comment personnaliser le footer avec Tailwind CSS ?
Comment organiser le design global avec Tailwind CSS ?
Conclusion
En intégrant Tailwind CSS dans votre projet, vous pouvez améliorer considérablement la personnalisation et le design de votre page web. Quelle autre fonctionnalité de Tailwind CSS aimeriez-vous explorer pour enrichir votre site ?
