Comment décorer avec TailwindCSS ?

Introduction

CSS est le pinceau des développeurs pour créer des designs élégants et engageants, mais styliser plusieurs éléments HTML peut rapidement devenir fastidieux et complexe.

Les frameworks comme Bootstrap ou Material Design centralisent les styles, mais cela peut entraîner une dépendance excessive et compliquer la personnalisation.

Heureusement, TailwindCSS permet d’obtenir le meilleur des deux mondes.

Dans cet article, je vais vous faire part de mon expérience avec TailwindCSS sur un important projet professionnel et vous offrir un récapitulatif de ce que j’ai appris sur deux aspects :

• La première partie vous expliquera pourquoi nous avons été séduits par ce framework,
• La deuxième partie, vous montrera comment utiliser TailwindCSS pour créer un mini-projet de manière pratique et efficace.

Prérecquis technique :

Avant de commencer à utiliser TailwindCSS, il est important de satisfaire certaines exigences préalables afin de pouvoir profiter pleinement des fonctionnalités du framework. En voici quelques-unes :

• Maîtrise du HTML,
• Solides connaissances en CSS,
• Familiarité avec les concepts de base du design, media queries, flexbox, et système de grille.

Pourquoi TailwindCSS

Au lieu d’écrire des styles CSS personnalisés pour chaque élément, vous pouvez simplement appliquer des classes utilitaires préconstruites pour définir des propriétés CSS courantes telles que les couleurs, les polices, les espacements… Cela réduit considérablement le temps nécessaire pour styliser votre application ou votre site web.

Le framework est également hautement configurable et personnalisable, permettant de créer des designs uniques avec peu de code.

TailwindCSS connaît actuellement un succès croissant sur le marché, grâce à son utilisation populaire dans l’industrie du développement web et à sa réputation de fournir des résultats satisfaisants. Son adoption est en constante augmentation et son potentiel pour faciliter et accélérer le développement web en fait une option de choix pour de nombreux développeurs.

Nous allons comparer le code CSS traditionnel et TailwindCSS avec un simple exemple. Il s’agit d’un design basique pour une section comprenant un titre, une description et un bouton. Cela nous permettra de mieux comprendre les avantages de Tailwind en matière d’efficacité et de productivité.

Le script CSS :

section {
    background-color: #FEEBC8;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section .container {
    margin: 0 auto;
    text-align: center;
}

section h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #1D4ED8;
    margin-bottom: 1rem;
}

section p {
    font-size: 1.5rem;
    color: #9CA3AF;
    margin-bottom: 2rem;
}

section a {
    background-color: #fff;
    color: #1F2937;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    text-decoration-line: none;
}

section a:hover {
    background-color: #E5E7EB;
}

La magie avec TailwindCSS :

<section class="bg-amber-100 h-screen flex items-center">
    <div class="container mx-auto text-center">
        <h1 class="text-4xl font-bold text-blue-700 mb-4">Titre de la section</h1>
        <p class="text-gray-500 text-lg mb-8">Dans cet article, je partage mon expérience
            professionnelle avec TailwindCSS</p>
        <a href="#"
           class="bg-white text-gray-800 font-bold py-2 px-4 rounded-full no-underline hover:bg-gray-300">Passer
            à l'action</a>
    </div>
</section>

Une petite explication pour le style de la balise <a> : chaque classe utilisée dans tailwind correspond à style en css :

Les fans d’autres frameworks CSS peuvent prétendre que tout peut être réalisé avec Bootstrap, Foundation… Mais pour les non-initiés, il est important de mettre TailwindCSS à l’épreuve et de voir ce qu’il a dans le ventre.

Nous allons donc faire un autre petit exemple pour montrer les compétences de TailwindCSS face au célèbre Bootstrap.

Le rendu est un simple bouton, basique, avec un design diffèrent au moment du survol.

Avec Boostrap :

.custom-bg-violet {
    background-color: #9f7aea;
    border-color: #8b5cf6;
}

.custom-bg-violet:hover {
    background-color: #8b5cf6;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.5);
    border: 1px double #8b5cf6;
    outline: 1px solid #8b5cf6;
}

Notez que les styles de la bordure et de l’ombre portée (box shadow) sont ajoutés dans une classe CSS custom, car il n’existe pas de classe Bootstrap qui les définissent.

Avec TailwindCSS :

<button
    class="rounded-lg bg-violet-700 px-4 py-2 font-bold text-white 
hover:bg-violet-200 hover:text-violet-500 hover:outline-double hover:outline-1 hover:outline-violet-500 hover:shadow-inner">
    Cliquez ici
</button>

Voici une comparaison rapide pour mettre en évidence les avantages de TailwindCSS à travers d’exemples simples. Cependant, lorsqu’il s’agit de projets plus importants avec de nombreux éléments et des besoins spécifiques en matière de thème, cela peut devenir plus complexe pour les développeurs, et augmenter considérablement la taille du code. Il est donc crucial d’évaluer les besoins et les objectifs du projet avant de choisir l’outil de développement le plus adapté.

Répéter les mêmes classes pour créer des styles uniques dans différents composants peut être fastidieux et contre-productif, en violation du principe DRY (Don’t Repeat Yourself) dans notre approche des styles.

Cependant, avec TailwindCSS, la fonctionnalité @apply nous permet d’utiliser des classes de base pour créer des classes de niveau supérieur, réutilisables à travers différents composants. Cela réduit la duplication de code et favorise la cohérence des styles. Nous explorerons plus en détail cette fonctionnalité dans un deuxième article.

TailwindCSS est le roi de la jungle des frameworks CSS modulaires ! Avec son panel de classes utilitaires prédéfinies, il permet aux développeurs de créer des styles personnalisés en combinant ou en utilisant les classes de manière indépendante. Et si jamais vous ne trouvez pas la classe qu’il vous faut, pas de panique ! La personnalisation de Tailwind, c’est comme la cerise sur le gâteau ! Pour découvrir cette facette cachée, rien de mieux que la partie pratique avec la configuration tailwind.config.js.

Alors, prêts à découvrir cette facette ?

 

TailwindCSS en pratique

Durant cette section, nous allons explorer les fonctionnalités de Tailwind CSS sur un projet de petite envergure. Nous allons créer une page web qui répond aux besoins d’un projet réel, tels que la personnalisation du thème, le mode sombre, ma gestion du thème et des classes dynamiques, le responsive et le plugin.

La page web mettra en avant quatre animaux (un poussin, un renard, un singe et une grenouille) et attribuera un nom à chaque animal choisi, en tenant compte du fait que chaque animal possède sa propre couleur.

Le rendu de la première page :

Le rendu après la sélection d’un animal (dans cet exemple, le renard) :

Sur notre projet, j’ai configuré le framework TailwindCSS avec React afin de prendre en compte les différents cas d’utilisation que nous allons aborder. J’ai opté pour React, car il s’agit du framework le plus largement utilisé côté front-end.

Si vous souhaitez reconstruire le projet avec un autre framework, il vous suffira de suivre la documentation de TailwindCSS pour l’installation, le reste du projet restant identique.

Installation :

Avec Docker : dans la racine du projet, lancer les commandes suivantes :

docker build -t neosoft-tailwindcss .
docker run -p 3000:80 neosoft-tailwindcss

Sans Docker : il faut installer une version récente de Node.js, ensuite dans la racine du projet lancer les commandes suivantes :

npm install
npm start

Personnalisation du thème :

Pour commencer, nous examinerons la configuration de TailwindCSS, en particulier le fichier tailwind.config.ts qui constitue le cœur de Tailwind CSS. C’est là que nous personnaliserons notre style d’application.

Le structure du fichier par défaut :

module.exports = {
  content : ['./src/**/*.{js,jsx,ts,tsx}'],
  theme:{ 
    screens: {},
    colors: {},
    extend: {}
  },
  Plugins :[],
}

• Les couleurs spécifiques qui respectent la charte de chaque animal. Cela signifie que nous attribuerons un code couleur à chaque animal comme suit :

Voici les éléments que nous allons personnaliser tout au long de ce projet :

Animal	Code couleur
Poussin	#4E740D
Renard	#C46406
Singe	#69432E
Grenouille	#4E740D

Le curseur au survol de chaque bouton avec une image représentant l’animal, comme suit :

Animal	Image
Poussin	🐤
Renard	🦊
Singe	🐵
Grenouille	🐸

• La famille et la taille du typo
• L’animation du texte afficher pour le nom de l’animal

Personnalisation des couleurs du thème :

Cela peut être réalisé de deux manières différentes :

• Soit en utilisant l’objet “colors” directement sous l’objet “theme”,
  • Tailwind n’utilisera plus sa palette de couleurs par défaut, et nous pourrons utiliser uniquement les couleurs que nous avons définies.
• Soit en utilisant l’objet “colors” sous l’objet “extend” dans l’objet “theme”.
  •  Tailwind utilisera à la fois sa palette de couleurs par défaut et les couleurs que nous avons définies dans “extend”.

Tout d’abord, nous définissons notre palette de couleurs personnalisable dans notre fichier tailwind.config.ts, directement sous l’objet “colors” dans l’objet “theme” :

theme: {
  colors: {
    chick: '#4E740D',
    fox: '# C46406', 
    monkey: '#69432E ',
    frog: '#4E740D ',
  },
…
}

Maintenant, nous pouvons utiliser les couleurs avec les noms “chick”, “fox”, “monkey” et “frog”, par exemple, pour définir un arrière-plan coloré pour un poussin avec la class “bg-chick” ou un texte de couleur renard avec la class “text-fox”.

Cependant, étant limités aux couleurs déjà définies, nous devons ajouter une palette de couleurs pour ce projet. Je vais choisir d’ajouter les couleurs à la section “extend” du fichier de configuration du code :

theme: {
  colors: {
    chick: '#4E740D',
    fox: '# C46406', 
    monkey: '#69432E ',
    frog: '#4E740D ',
  },
  extend: {
    colors: {
      neutral: colors.neutral,
      white: colors.white,
      teal: colors.teal,
      'purple-500': colors.purple[500],
      orange: colors.orange[600],
      gray: colors.gray,
   },
  …

Sur le plan pratique :

Tailwind recherchera d’abord nos couleurs de base, définies dans la section “colors” directement sous “theme”, puis il étendra le reste des couleurs définies dans la section “extend”.

Je vous invite à consulter la documentation officielle de Tailwind pour découvrir comment profiter pleinement de sa palette de couleurs, dans un second article (partie 2), nous allons nous intéresser aux modifications de notre configuration afin de rendre cela dynamique, ça sera dans la section gestion du thème et des classes dynamiques.

Personnalisation du curseur :

Absolument ! La personnalisation du thème dans TailwindCSS nous permet d’aller jusqu’à modifier la forme du curseur de la souris lors du survol d’un élément HTML. Dans notre cas, nous allons profiter de cette fonctionnalité pour personnaliser le curseur lors du survol des boutons en utilisant l’image de l’animal associé.

Dans la section “extend”, nous allons ajouter un bloc “cursor” pour associer différentes images aux animaux.

cursor: {
  fox: "url(\"data:image/svg+xml;utf8, 
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>🦊</text></svg>\"), pointer",
  frog: "url(\"data:image/svg+xml;utf8, 
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>🐸</text></svg>\"), pointer",
  chick:
    "url(\"data:image/svg+xml;utf8, 
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>🐤</text></svg>\"), pointer",
  monkey:
    "url(\"data:image/svg+xml;utf8, 
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>🐵</text></svg>\"), pointer",

Dans notre approche, nous avons utilisé des images au format SVG en les intégrant directement dans l’URL de récupération de l’image. Cependant, nous avons également la possibilité d’utiliser des images à partir de notre dossier “assets” ou “public” en spécifiant le chemin absolu de l’image. Cette flexibilité nous permet de choisir la méthode qui convient le mieux à nos besoins en matière d’affichage des images dans notre application.

Pour utiliser les images d’animaux comme curseurs personnalisés, nous ajouterons les classes “cursor-fox” ou “cursor-chick” à l’élément HTML approprié.

De plus, nous pourrons également utiliser une approche dynamique en associant le curseur spécifique à l’animal au survol. Cela signifie que nous pourrons changer le curseur en fonction de l’animal spécifique lié au bouton survolé. Nous explorerons davantage cette fonctionnalité dans la section consacrée à la gestion du thème et des classes dynamiques.

Personnalisation de la typo :

Nous allons définir la police par défaut comme étant “Montserrat” dans notre thème, avec “sans” pour la police par défaut de Tailwind. En ce qui concerne les tailles de police, nous utiliserons les valeurs suivantes :

• ‘0.8rem’ pour les informations de petite taille ;
• ‘1rem’ pour la taille par défaut ;
• ‘1.33rem’ pour les textes remarquables ;
• ‘1.8rem’ pour les textes importants ;
• ‘8rem’ pour les plus grandes tailles de texte.

Dans la section ‘fontFamily’ de notre thème, nous allons utiliser le mot-clé ‘sans’ pour définir notre propre police par défaut. Ensuite, nous ajouterons le mot-clé ‘mono’ pour utiliser une autre police de Tailwind. Pour consulter la liste par défaut de Tailwind de police, visitez https://tailwindcss.com/docs/font-family.

theme : {
….
  fontFamily: {
    sans: ['Montserrat',...fontFamily.sans],
    mono: [...fontFamily.mono],
   'other-font': ['my-other-font'],
},

….
}

Pour garantir le chargement de la police par le navigateur, il est essentiel d’ajouter la ligne suivante dans votre fichier CSS racine :

@layer base {
    @font-face {
        font-family: 'Montserrat';
        src: url('/font/Montserrat.ttf');
    }
}

Pour les tailles de police spécifiées dans notre configuration, nous allons les définir de la même manière. Ainsi, nous pourrons utiliser exclusivement les tailles de police que nous avons définies, sans avoir recours aux tailles par défaut de TailwindCSS.

theme :{
….
  fontSize: {
    sm: '0.8rem',
    base: '1rem',
    md: '1.33rem',
    xl: '1.8rem',
   '2xl': '8rem',
  },
…
}

Pour utiliser une taille de police différente de la taille de base, nous pouvons appliquer la classe “text-2xl” (par exemple) afin d’obtenir une taille de police plus grande.*

Création d’animations CSS :

La personnalisation d’un thème peut aller jusqu’à la création d’animations CSS spécifiques en utilisant les keyframes de notre choix. Tailwind propose déjà des animations prédéfinies par défaut, ce qui vous permet de vous amuser avec https://tailwindcss.com/docs/animation. Dans notre cas, nous allons utiliser une animation infinie pour changer la couleur du texte et obtenir le résultat souhaité :

Dans la première phase, nous allons implémenter l’animation dans le fichier de configuration. Nous allons ajouter la section “extend” et y définir les paramètres nécessaires :

extend: {
 …
 animation: {
  		 text: 'text 4s ease-in-out infinite',
 	 },
 	 keyframes: {
   		 text: {
     		 '0%, 100%': {
       			 'background-size': '200% 200%',
      			 'background-position': 'left center',
    			 },
    			 '50%': {
      			 'background-size': '200% 200%',
      			 'background-position': 'right center',
    			 },
  		 },
 },
 …
}

Chaque animation est associée à une clé, que nous utiliserons ensuite dans le bloc “keyframes” pour décrire les changements précis à chaque étape de l’animation.

Dans notre cas, nous apportons des modifications de taille et de position du fond lors de l’utilisation de notre animation. Pour l’utiliser, il vous suffit d’ajouter la classe “animate-text” à l’élément HTML de votre choix.

Un exemple du projet, nous avons utilisé avec un dégradé de fond sur un texte, comme illustré ci-dessous :

animate-text 

bg-gradient-to-r 
from-teal-500 via-purple-500 to-orange-500
 
bg-clip-text

Le Dark Mode, devenu une tendance incontournable sur les sites web, se généralise sur toutes les plateformes numériques. Tailwind facilite l’activation du Dark Mode avec sa fonctionnalité intégrée. En ajoutant simplement une clé “darkMode” avec la valeur souhaitée dans le fichier de configuration, vous pouvez activer le mode sombre selon vos préférences, que ce soit en fonction du thème sombre du système d’exploitation de l’utilisateur “media” ou en utilisant une classe spécifique “class”.

Dans notre projet, nous partirons sur l’utilisation du Dark Mode avec “class”, que nous définissons niveau la configuration

{
….
darkMode: 'class',
theme :{
 		….
 	}
…
}

Ensuite, pour différencier l’utilisation des deux modes, nous utilisons le mot-clé “dark” sur l’élément HTML. Par exemple, pour le fond d’écran :

bg-gradient-to-br 
from-teal-200 to-orange-200
dark:from-teal-800 dark:to-orange-800

Nous avons observé sur notre capture d’écran que le passage en mode sombre ajoute la classe “dark” à l’élément racine HTML. Lorsque cette classe est présente, le navigateur applique les styles définis avec la pseudo-classe “dark”, permettant ainsi de surcharger les couleurs spécifiques au mode sombre.

Les choses deviennent passionnantes avec un dynamisme en constante évolution. Jusqu’à présent, nous n’avons pas encore découvert la facette la plus puissante du mode dynamique, ni le responsive ou les plugins.

Je vous encourage à vous lancer dans une petite expérience avec Tailwind et à vous préparer, car nous aborderons ces sujets dans notre prochain article…