Lorsqu’on réalise un site web, l’un des éléments les plus importants sur lesquels miser pour un succès garanti est l’attrait visuel. Une direction artistique impeccable, peu importe si elle est simple ou d’une originalité jamais vue auparavant, est nécessaire pour attirer l’attention des utilisateurs. Pour les développeurs front-end, il est crucial de bien intégrer le design choisi, et sur internet, cela se fait par l’intermédiaire du langage informatique CSS.
Aujourd’hui, je vous présente un framework qui a révolutionné notre manière de développer le front-end : Tailwind CSS !
C’est quoi Tailwind CSS?
Comme mentionné plus haut, Tailwind CSS est un framework, soit une boîte à outils en français. Cela permet aux développeurs de coder de manière plus flexible et efficace. Tailwind fonctionne en analysant tous les fichiers pouvant contenir des classes de styles à appliquer (HTML, JavaScript, etc.) à la recherche de classes personnalisées, puis en générant le style correspondant et en les inscrivant dans un fichier CSS statique.
Ce qu’il y a à comprendre ici, c’est que contrairement au CSS classique où les styles sont généralement inscrits dans des fichiers externes au HTML, Tailwind CSS permet de les inscrire directement dans les fichiers HTML, sur les éléments eux-mêmes ! Voici un exemple :
Au lieu de faire ceci :
exemple.html
exemple.css
Tailwind permet d’arriver au même résultat en faisant cela :
Et on obtient ceci :
Comment ? Avec des classes utilitaires propres à Tailwind reprenant les propriétés CSS les plus courantes. Voici quelques exemples :
- display: flex -> flex
- flex-direction: column -> flex-col
- align-items: center -> items-center
- color: white -> text-white
- position: relative -> relative
- width: 100% -> w-full
Pour les espacements, Tailwind offre des valeurs prédéfinies utilisant une base de 4.
- padding: 4px -> p-1
- padding-top: 8px -> pt-2
- padding-right: 16px -> pr-4
- padding-left: 32px -> pl-8
- padding: 40px 0px -> py-10
- padding: 0px 48px -> px-12
- etc..
Mais il est tout à fait possible d’utiliser des valeurs plus précises en les inscrivant entre crochets ainsi : p-[27px].
La grande majorité des classes CSS ont leur équivalent Tailwind, mais le CSS classique peut également être utilisé et compilé si on désire utiliser une propriété moins connue, il suffit de l’inscrire entre crochets et sans espace : [backface-visibility:visible].
Responsive
Tailwind permet également de simplifier grandement le responsive d’un site en permettant d’utiliser des breakpoints simple et modifiables dans le HTML.
Les breakpoints par défaut sont les suivants :
- sm: ‘640px’,
- md: ‘768px’,
- lg: ‘1024px’,
- xl: ‘1280px’,
- 2xl: ‘1536px’,
Un exemple d’utilisation pourrait ressemble à ceci, ou on peut remplacer :
Par ceci :
Il est à noter que Tailwind CSS suit une approche « mobile first », ce qui signifie que la valeur de base donnée sera celle en-dessous de 640px et que chaque breakpoint augmentera, contrairement au développement « desktop first » où la valeur de base donnée est celle de 1920px et on descend avec les breakpoints.
Personnalisation
Si les variables par défaut de Tailwind ne conviennent pas à un projet, il est également possible de créer et personnaliser des variables à l’aide d’un fichier de configuration initial. Il est donc possible de créer de nouvelles valeurs pour des couleurs, des typographies, des espacements, des bordures arrondies, etc., et de les associer à des variables pouvant être réutilisées afin de simplifier au maximum le processus de développement du site.
Exemples pratiques
Voici quelques exemples pratiques!
Un bouton simple :
En ordre voici ce qu’on fait : ajout d’espacements verticaux de 20px, ajout d’espacements horizontaux de 32px, arrondissement des coins maximal, fond en noir, texte en blanc et en majuscules.
Et voici le résultat :
Une liste de cards :
Ici on place la div.container en display grid avec trois colonnes et un espacement de 32px.
On ajoute à chaque card un espacement horizontal de 20px, un espacement vertical de 32px, un background noir avec 10% d’opacité, puis au dessus de 768px on modifie l’espacement horizontal pour 32px et le vertical pour 48px.
Pour le premier <p>, on ajoute un margin-bottom de 40px, on met une couleur au texte, une taille de 42px et une épaisseur de 700 (soit bold), puis au dessus de 1024px on change le margin-bottom pour 48px.
Sur les <h3>, on met le texte à une taille de 32px et une épaisseur de 700 (bold).
Finalement, sur le dernier <p>, on met un margin-top de 8px par défaut et de 12px une fois rendu au dessus de 1024px.
Et voici le résultat :
Conclusion
Bref, que vous soyez client ou développeur, Tailwind CSS est une source d’économie de temps et d’argent majeure qui vaut la peine d’être essayée !
Si ce sujet a piqué votre curiosité et que vous désirez voir l’efficacité de Tailwind CSS en action, cliquez ici pour accéder à notre formulaire de soumission et on s’en rejase!
