Un guide du débutant pour Tailwind CSS – Qu'est-ce que c'est et comment l'utiliser ?

Il existe de nombreuses façons de styliser les sites web - du CSS pur, en passant par des préprocesseurs comme Sass, jusqu'aux frameworks comme Bootstrap, Foundation, ou le célèbre Tailwind CSS. Nous allons essayer de présenter les avantages et inconvénients de Tailwind CSS et expliquer comment exploiter l'un des frameworks les plus populaires et appréciés pour le stylisme de sites web.

Qu'est-ce que Tailwind CSS ? 

Tailwind CSS est, en termes télégraphiques, une immense collection de classes utilisées pour styliser les éléments HTML. Chaque classe a une tâche - par exemple, la classe .flex ajoute simplement display: flex à un élément, et la classe .text-orange-500 modifie la couleur du texte en orange. 

Vous vous demandez probablement s'il s'agit d'un style "inline" camouflé. Peut-être que cela semble ainsi, et pourtant le framework Tailwind est considéré comme l'un des meilleurs dans sa catégorie. Il devient rapidement évident que cette approche du stylisme nous fait gagner beaucoup de temps en écriture de code nous-mêmes !

Avantages et inconvénients de l'utilisation de Tailwind CSS

Tout d'abord, nous n'avons pas besoin d'inventer des noms arbitraires pour les classes, ce que nous pensons être l'une des choses les plus difficiles en programmation. Avec Tailwind CSS, toutes les classes ont une convention de nommage cohérente qu'un autre programmeur comprendra facilement. 

Un autre avantage est que si nous voulons changer la couleur du texte d'un élément de l'orange au rouge, il nous suffit de modifier la classe .text-orange-500 en .text-red-600 (le chiffre à côté de la couleur, dans ce cas, indique la nuance de la couleur - plus le chiffre est élevé, plus la couleur est foncée) et c'est tout. Nous n'avons pas à nous soucier qu'en modifiant la classe CSS, nous changions l'apparence d'un autre élément indésirable, et que tout le design de la page web s'effondre.

Autres avantages du framework Tailwind :

• Moins d'écriture de CSS et d'invention de noms de classes, ce qui se traduit par un développement de code plus rapide.
• Tailwind vous permet de modifier les styles des éléments en toute sécurité. Même si vous revenez à un élément donné après un long moment, vous pouvez changer, par exemple, le remplissage ou la couleur, sans souci.
• Suppression automatique des styles inutilisés. Une fois le site déployé en production, Tailwind s'assurera que seuls les styles utilisés soient inclus dans le fichier .css. 
• Grâce à la convention de nommage des classes adoptée, le code HTML lui-même nous dira déjà comment un élément donné va se comporter et ce à quoi il ressemblera. 

Inconvénients de Tailwind CSS :

• Surcharge avec des classes HTML. 
• Il nécessite une connaissance supplémentaire du framework. Nous devons apprendre comment ses classes fonctionnent, comment les utiliser correctement, et comment étendre la fonctionnalité avec des fonctionnalités importantes pour nous. Un autre type d'abstraction s'invite dans notre projet. 
• Pour utiliser correctement le framework Tailwind CSS, certains outils sont nécessaires, par exemple, Vite ou Webpack.
• Utiliser Tailwind est logique si notre projet a une structure de composants - nous pouvons utiliser un élément donné plusieurs fois sans répéter le code, par exemple, des composants React ou des templates Twig.

Comment Tailwind CSS peut-il vous aider ?

Tailwind nous aidera à construire un site web unique et réactif plus rapidement que si nous devions écrire notre propre CSS, tout en permettant plus de liberté que, par exemple, Bootstrap.

Un outil utile

Si vous utilisez VS Code, assurez-vous de vous intéresser au plugin Tailwind CSS IntelliSense, qui améliorera grandement votre écriture de code. Lors de l'ajout de classes CSS, le plugin nous suggérera automatiquement les options disponibles. Dans le cas des couleurs, il nous montrera la nuance donnée, et dans d'autres cas - il nous montrera ce que la classe fait réellement. 

 

Conseil: Assurez-vous d'avoir vérifié toutes les options suivantes dans les paramètres du plugin.

 

Suppression automatique des styles "zombies"

Le framework lui-même pèse quelques Mo, mais une fois les fichiers de style créés et prêts à être téléchargés sur le serveur de production, le CSS pèsera beaucoup moins. Tailwind sélectionnera uniquement les styles qui ont été utilisés pour construire le layout.

Mode sombre

Avec Tailwind CSS, nous pouvons facilement spécifier les styles par défaut et ceux à utiliser en mode sombre. Il suffit d'ajouter le préfixe dark.

 

Réactivité

Il en va de même pour la réactivité. Il suffit d'ajouter le préfixe correspondant à la largeur maximale de l'écran : sm, md, lg, xl, 2xl pour décider quoi afficher et comment. Par exemple, l'élément est caché par défaut et s'affiche uniquement à partir de la résolution lg - par défaut 1024px.

Configuration

Si nous ne sommes pas satisfaits de la palette de couleurs standard ou des points de rupture fixés par Tailwind CSS, nous pouvons facilement les modifier dans le fichier de configuration tailwind.config.js. Ci-dessous, nous montrons un exemple d'ajout d'une couleur primaire personnalisée et de modification des points de rupture par défaut.

 

Composants pratiques de Tailwind CSS

Nous allons maintenant montrer comment créer un bouton qui s'affiche lorsque la souris survole un bouton d'infobulle, sans écrire de CSS. Dans l'exemple, nous utilisons React, donc il y a className au lieu de class. 

Commençons par créer un bouton et une infobulle. Nous utiliserons les classes : 

• flex - display: flex,
• bg-slate-900 - la couleur de notre arrière-plan,
• min-h-screen - une classe nécessaire pour que notre élément occupe au minimum tout l'écran, 
• justify-center - centrer les éléments flex horizontalement,
• items-center - centrer les éléments flex verticalement.

<div className="flex bg-slate-900 text-center min-h-screen
                         justify-center items-center">
       <div className="block relative">.
         <button className="bg-orange-400">Button</button>.
         <div className="bg-orange-300">.
           <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
     </p>
         </div>.
       </div>.
     </div>.

Pour l'instant, notre bouton et notre infobulle ne fonctionnent ni ne ressemblent à rien.

 

Ajoutons quelques styles pour améliorer l'apparence de notre bouton.

• bg-orange-400 - l'arrière-plan de notre bouton,
• px-5 - 5 unités de remplissage horizontalement,
• py-2 - 2 unités de remplissage verticalement,
• rounded-xl - grande bordure arrondie du bouton,
• text-2xl - grande police,
• min-w-[300px] - largeur minimale rigidement fixée à 300px,
• hover:bg-slate-600 - couleur d'arrière-plan différente lorsque vous survolez le bouton avec la souris,
• hover:text-white - une couleur de texte différente lorsque vous survolez avec la souris,
• transition-all - par défaut transition douce entre les changements de couleur,
• cursor-pointer - curseur en forme de patte lorsque vous survolez un bouton.

    <div className="flex bg-slate-900 text-center min-h-screen
                         justify-center items-center">
       <div className="block relative">.
         <button className="bg-orange-400 px-5 py-2 rounded-xl text-2xl min-w-[300px] hover:bg-slate-600 hover:text-white transition-all cursor-pointer">Button</button>.
         <div className="bg-orange-300">.
           <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
     </p>
         </div>.
       </div>.
     </div>.

Après avoir ajouté la classe, notre bouton a déjà meilleure apparence, et il a également une animation lorsque le curseur est survolé. Et cela sans une seule ligne de CSS !

Stylisons également l'élément qui servira d'infobulle.

    <div className="flex bg-slate-900 text-center min-h-screen
                         justify-center items-center">
       <div className="block relative">.
         <button className="bg-orange-400 px-5 py-2 rounded-xl text-2xl min-w-[300px] hover:bg-slate-600 hover:text-white transition-all cursor-pointer">Button</button>.
         <div className="bg-orange-300 pointer-events-none absolute mx-1 w-max px-5 py-2 rounded-xl left-full top-0.5 translate-y-0.5 scale-x-0">.
           <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
     </p>
         </div>.
       </div>.
     </div>.

Ici, nous avons ajouté les éléments suivants :

• pointer-events-none - désactive la réponse de la souris,
• absolute - position absolue par rapport au "parent",
• mx-1 - une unité de marge horizontale,
• px-5, py-2, rounded-xl - styles comme dans l'élément précédent,
• left-full - positionnement de l'élément au maximum à gauche,
• top-0.5 - positionnement de l'élément à 50 % de hauteur du parent,
• translate-y-0.5 - ajustement de la hauteur de l'élément donné, afin que le centre de l'infobulle soit au milieu du bouton, et non sur son bord supérieur.
• scale-x-0 - réglage de la largeur de l'élément à 0, ce qui le masque par défaut.

L'infobulle est actuellement invisible, mais nous allons corriger cela à l'étape suivante.

Nous pouvons maintenant déjà ajouter la fonctionnalité d'affichage de l'infobulle.

   <div className="flex bg-slate-900 text-center min-h-screen 
justify-center items-center">
       <div className="block group relative">.
         <button className="bg-orange-400 px-5 py-2 rounded-xl text-2xl min-w-[300px] hover:bg-slate-600 hover:text-white transition-all cursor-pointer">Button</button>.
         <div className='bg-orange-300 pointer-events-none absolute mx-1 w-max px-5 py-2 rounded-xl left-full top-0.5 translate-y-0.5 scale-x-0 group-hover:scale-x-100 transition-transform origin-left'>.
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>.
         </div>.
       </div>.


     </div>.

Nous pouvons le faire en utilisant la classe group, que nous ajoutons au "parent" de notre élément. Lorsque nous survolons avec la souris le "parent", nous activons la classe group-hover:scale-x-100, qui annule la classe scale-x-0. 

Classe 

transition-transform - nous définissons l'effet de transition pour l'effet transform,

origin-left - animation 

scale 0->100

doit commencer à partir de la gauche. 

Voici le résultat :

Comme nous pouvons le voir, il est devenu assez chargé dans l'attribut className. Il y a un remède à cela ! Dans notre fichier CSS par défaut, où nous avons ajouté Tailwind, nous pouvons ajouter notre propre classe composée de classes Tailwind. Maintenant, notre fichier app.css ressemble à ceci :

@tailwind base;
@tailwind components;
@tailwind utilities;




@layer components {
   .button{
       @apply bg-orange-400 px-5 py-2 rounded-xl text-2xl min-w-[300px] hover:bg-slate-600 hover:text-white transition-all cursor-pointer;
   }


   .tooltip{
       @apply bg-orange-300 pointer-events-none absolute mx-1 w-max px-5 py-2 rounded-xl left-full top-0.5 translate-y-0.5 scale-x-0 group-hover:scale-x-100 transition-transform origin-left
   }


}

Et les éléments JSX ressemblent à ceci :

     <div className="flex bg-slate-900 text-center min-h-screen justify-center items-center">.
       <div className="block group relative">.
         <button className="button">Button</button>.
         <div className="tooltip">.
           <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit
           </p>
         </div>.
       </div>.


     </div>.

Nous avons déplacé l'ensemble des classes du bouton et de l'infobulle de la balise HTML au fichier CSS. Cela nous a permis d'obtenir un code plus clair. C'est une bonne solution si le nombre de classes est déjà vraiment important ou si nous avons beaucoup d'éléments qui utilisent le même ensemble et que nous voulons éviter les répétitions.

Tailwind CSS et React pour le développement frontend

Dans l'exemple ci-dessus, nous avons montré comment Tailwind peut être utilisé avec React dans une application créée avec Vite. L'avantage de React est que nous pouvons enregistrer des éléments JSX individuels dans des fichiers séparés et les utiliser comme un Composant Higher-Order. De cette façon, même si notre composant est composé de nombreuses classes Tailwind, cela ne nous dérangera pas, car nous l'utiliserons, par exemple comme

<Button />

au lieu de

<button className="...">Button</button>

React et Tailwind CSS sont des outils de développement frontend parmi les plus populaires. Le nombre de ressources disponibles (questions sur Stack Overflow, articles de blog, tutoriels, etc.) est très grand, ce qui facilite le travail avec ces technologies. Bien sûr, Tailwind CSS fonctionne également avec d'autres frameworks, tels que Vue, Angular, et Svelte. La documentation sur le site de Tailwind propose des instructions étape par étape pour les frameworks les plus populaires, ce qui rend très facile le démarrage de la création de notre interface utilisateur. 

Qu'est-ce que Tailwind CSS ? Résumé

Si vous avez besoin d'un outil qui accélérera la création de styles pour votre projet, tout en vous laissant une grande liberté, Tailwind CSS est la solution qu'il vous faut. La plupart des développeurs frontend s'accordent à dire que jusqu'à présent, aucun meilleur outil n'a été inventé, pour ce type de tâche, et la grande communauté, le très bon plugin VS Code, et la documentation claire ont un effet positif sur le travail avec le CSS. 

Vous vous interrogez sur les bonnes solutions frontend ? Nous pouvons vous aider à les choisir et à les implémenter dans le cadre de nos services de développement frontend.