Décorer avec TailwindCSS – Partie 2

Introduction

Après une brève pause suite à la première partie de notre article “Comment décorer avec TailwindCSS ?“, nous allons maintenant aborder le sujet de manière plus approfondie en explorant le mode dynamique avec Tailwind. Nous allons nous plonger dans les fonctionnalités telles que le mode responsive, le dynamisme des thèmes et des classes, et les plugins.

Le responsive :

Tailwind utilise des classes utilitaires avec des préfixes de breakpoints pour rendre l’interface réactive. Les breakpoints sont liés aux tailles d’écran courantes, ce qui facilite l’application de styles spécifiques en fonction de la taille de l’écran.

Voici les breakpoints par défaut :

Breakpoint prefix	Minimum width	CSS
Sm	640px	@media (min-width: 640px) { ... }
Md	768px	@media (min-width: 768px) { ... }
Lg	1024px	@media (min-width: 1024px) { ... }
Xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

Sur le plan pratique, nous utilisons le préfixe prefix:style au niveau des classes. Lorsque l’écran atteint le point de rupture spécifié, le style sera surchargé automatiquement.

Modifions  notre site illustrant la première partie de l’article [section Tailwind en pratique de la partie 1 de l’article] pour différencier le style de la bannière contenant les 4 icônes d’animaux (un poussin, un renard, un singe et une grenouille) en fonction de la taille de l’écran.

Dans le fichier ToggleTheme, nous adaptons notre code de la manière suivante :

<div
  className="h-18 container mt-6
    flex w-4/5 content-center justify-around rounded-full
    sm:w-2/4
    lg:border-4 lg:border-solid
    lg:border-slate-700 lg:bg-gray-300/40 lg:p-1 lg:shadow-inner
    lg:shadow-gray-800 lg:backdrop-blur
    lg:dark:border-slate-300 lg:dark:bg-slate-50/40"
>
  {props.themes?.map((theme) => (
    <button
      className='m-2 h-12 w-12 
      rounded-full border border-solid border-slate-300 text-md 
      shadow-md hover:shadow-inner 
      lg:rounded-lg silver'
      key={theme.name}
      onClick={() => {
        changeTheme(theme.name);
      }}
    >
      <span className='text-center align-middle'>
        {theme.picture}
      </span>
    </button>
  ))}
</div>

Nous obtenons un rendu spécifique aux petits écrans.

Gérer le thème et les classes dynamiquement

Nous commencerons par adapter notre thème pour rendre les couleurs dynamiques, en les modifiant en fonction de la charte de l’animal sélectionné. Dans notre situation, nous attribuerons quatre couleurs pour chaque animal, deux pour le mode sombre et deux pour le mode clair, comme suit :

Avant d’intégrer nos couleurs dans la configuration de Tailwind, il est important de comprendre comment nous allons gérer le changement dynamique de ces couleurs afin que le navigateur les charge à chaque changement de thème.

Nous utiliserons les quatre couleurs génériques suivantes : primary, secondary, primary_dark et secondary_dark. Ces couleurs seront stockées dans des variables racines (root variables) du navigateur. Lorsqu’un changement de thème se produit, seules ces quatre couleurs seront modifiées de la manière suivante :

Nous allons progressivement convertir ce concept en code Tailwind afin de gérer notre thème de la même manière que nous l’avons observé :

• Créer les variables root

Dans notre fichier index.css comme nous avons fait avec le font-face dans l’article précèdent nous ajoutons le code suivant :

:root {
    --color-primary: 241 222 102; → rgb(241,222,102)
    --color-secondary: 189 173 102; → rgb(189,173,102)
    --color-primary_dark: 242 235 190; → rgb(242,235,190)
    --color-secondary_dark: 220 217 190; → rgb(220,217,190)

Adapter les couleurs de notre charte

Dans notre ficher Tailwind.config nous allons transférer les couleurs de cette manière :

colors: {
  transparent: colors.transparent,
  primary: 'rgb(var(--color-primary) / <alpha-value>)',
  secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
  primary_dark: 'rgb(var(--color-primary_dark) / <alpha-value>)',
  secondary_dark: 'rgb(var(--color-secondary_dark) / <alpha-value>)',
  chick: {
    primary: '241 222 102',
    secondary: '189 173 102',
    primary_dark: '242 235 190',
    secondary_dark: '220 217 190',
  },
  fox: {
    primary: '196 100 6',
    secondary: '97 76 55',
    primary_dark: '213 183 125',
    secondary_dark: '172 121 61',
  },
  monkey: {
    primary: '105 67 46',
    secondary: '77 43 30',
    primary_dark: '164 140 125',
    secondary_dark: '213 188 175',
  },
  frog: {
    primary: '78 116 13',
    secondary: '107 105 34',
    primary_dark: '113 162 31',
    secondary_dark: '174 184 82',
  },
},

L’utilisation de ces couleurs dans les classes se fera soit avec ‘bg-primary’, ‘text-primary’, ‘bg-secondary_dark’, ‘text-primary_dark’, etc. Ensuite, en fonction du thème choisi (l’animal sélectionné), la charte des couleurs s’adaptera automatiquement. Dans notre cas, nous avons défini les couleurs par défaut comme étant celles d’un poussin.

Dans une deuxième approche, nous allons aborder l’utilisation de classes dynamiques dans Tailwind CSS, ce qui n’est généralement pas recommandé en raison de l’utilisation du tree-shaking par Tailwind.

Si vous utilisez l’interpolation de chaînes de caractères ou que vous concaténez des noms de classes partiels ensemble, Tailwind ne les détectera pas et ne générera donc pas le CSS correspondant. En effet, toute classe qui n’a pas été déclarée dans vos fichiers sources ne sera pas générée dans le fichier de sortie.

Dans ce contexte, nous allons explorer deux façons de résoudre ce problème :

• La première, ce que tailwind recommande :

Il est toujours préférable d’utiliser les noms de classes complets. Voici un exemple :

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}



let colorClasses = colors[color]// color : indigo || cyan

return (
    <button type="button" className={`font-bold ${colorClasses}`}>
      Tes
    </button>
  )

Vous pouvez consulter la documentation officielle de Tailwind pour approfondir davantage ce concept.

• La deuxième, à l’aide de “safelist” :

Pour les développeurs qui ne préfèrent pas définir à l’avance les noms des classes dynamiques, Tailwind propose une solution dans la configuration où nous pouvons définir des classes dans un objet “safelist” qui sera garanti d’être généré dans le fichier de build. Cela permet d’inclure les classes dynamiques spécifiées dans le CSS final, même si elles ne sont pas directement utilisées dans les fichiers sources.

NB : cette solution est recommandée uniquement dans des cas critiques.

Comme exemple, nous allons afficher une icône de l’animal lorsque nous survolons sur les animaux. Pour cela, il suffit d’ajouter les classes suivantes :

safelist: [
    'cursor-fox',
    'cursor-frog',
    'cursor-chick',
    'cursor-monkey'
],

Nous pouvons optimiser l’écriture avec un pattern :

safelist: [
  {
    pattern: /cursor-(fox|frog|chick|monkey)/,
  },
],

Concernant les classes, nous utilisons la notation “clé-[valeur dynamique]” illustrée dans le code de ToggleTheme.tsx. Dans ce fichier, nous avons expérimenté les deux approches des classes dynamiques :

<button
  className={`border-slate-300 m-2 h-12 
  w-12 rounded-full border border-solid text-md 
  shadow-md hover:shadow-inner 
  lg:rounded-lg cursor-${theme.name} 
  ${props.activeTheme === theme.name ? 'bg-gray-400/30' : 'silver'}
  `}
…
>

input:checked + label:after {
    @apply left-[77px] bg-gradient-to-b from-neutral-500 to-neutral-700 -translate-x-full

}

.text-animation {
    @apply max-w-[calc(100%-24px)] animate-text self-center overflow-y-auto truncate bg-gradient-to-r
    from-teal-500 via-purple-500 to-orange-500 bg-clip-text font-mono font-black
    font-bold text-transparent text-xl md:capitalize lg:text-2xl lg:uppercase
}

Nous pouvons bénéficier d’une extension de fonctionnalités proposée par Tailwind afin d’améliorer l’expérience de développement. Nous avons accès à divers modules et plugins, offerts à la fois par le framework lui-même ou par d’autres développeurs. De plus, nous avons la possibilité de créer nos propres plugins personnalisés pour répondre spécifiquement à nos besoins. Cela nous permet d’enrichir davantage notre utilisation de Tailwind et d’optimiser nos flux de travail lors des phrases de développement.

Dans le contexte de l’utilisation de plugins fournis par Tailwind ou de la création d’un plugin personnalisé, je vous recommande vivement de consulter la documentation dédiée aux plugins de Tailwind. Dans notre situation, nous allons nous concentrer sur un plugin spécifique qui contribuera à améliorer la qualité de notre code lors de l’utilisation de classes utilitaires :

Le plugin prettier-plugin-tailwindcss permet d’automatiser l’organisation de nos classes Tailwind conformément aux recommandations. Pour son installation, il suffit d’exécuter cette commande :

npm install -D prettier prettier-plugin-tailwindcss

Ensuite, dans la racine de notre projet, si le fichier prettier.config.js n’existe pas, nous le créons et ajoutons le code ci-dessous :

module.exports = {
  plugins: [
require('prettier-plugin-tailwindcss')
],
  tailwindConfig: './tailwind.config.ts',

Enfin, assurez-vous que votre environnement de développement intégré (IDE) intègre correctement la configuration de Prettier pour qu’il puisse organiser les classes Tailwind après chaque modification. Si ce n’est pas le cas, vous pouvez exécuter une commande pour assurer la conformité du code.

À la racine du projet, exécutez la commande suivante :

npx prettier –write ‘src/**/*.{js,jsx,ts,tsx}’

Dans notre projet, j’ai déjà configuré l’environnement, et vous pouvez simplement exécuter la commande suivante pour linter l’ensemble du code :

npm run format

Je vous recommande d’examiner le référentiel (repo) du plugin, où nous avons la possibilité de configurer le linter selon nos préférences.

La crème de la crème

Voici quelques conseils pour une utilisation optimale de TailwindCSS dans un projet professionnel :

• Conception modulaire : adoptez une approche modulaire en structurant votre code de manière à regrouper les composants et les styles associés. Cela permet une maintenance plus facile et favorise la réutilisation du code à travers différentes parties de votre application.
• Optimisation de la performance : TailwindCSS génère un fichier CSS complet avec toutes les classes disponibles. Cependant, vous pouvez optimiser la taille du fichier CSS en utilisant la fonctionnalité de purge pour éliminer les classes inutilisées. Cela garantit que seuls les styles nécessaires sont inclus dans le fichier final, améliorant ainsi les performances de votre application.
• Validation des classes personnalisées : lors de la personnalisation de votre thème TailwindCSS, assurez-vous de valider soigneusement les nouvelles classes que vous ajoutez. Évitez les noms de classes trop spécifiques ou redondants. Optez pour des noms clairs et concis qui reflètent leur objectif et leur utilisation dans le contexte de votre projet.
• Collaboration efficace : si vous travaillez en équipe, établissez des conventions et des normes de codage pour garantir une utilisation cohérente de TailwindCSS. Partagez les meilleures pratiques avec vos collègues et documentez les décisions clés prises tout au long du projet. Cela facilitera la collaboration et la maintenance du code à l’avenir.
• Évolutivité du code : lorsque vous travaillez sur un projet complexe, pensez à l’évolutivité de votre code. Anticipez les futurs besoins et réfléchissez à la manière dont vous pouvez structurer vos styles de manière à ce qu’ils puissent être facilement étendus et modifiés à mesure que le projet évolue.
• Tests automatisés : intégrez des tests automatisés pour vérifier que les styles de votre interface s’appliquent correctement et sont cohérents. Utilisez des outils tels que Jest ou Cypress pour effectuer des tests d’interface utilisateur afin de garantir que votre application est visuellement cohérente à travers différentes interactions et états.
• Formation continue : restez à jour avec les dernières fonctionnalités, les bonnes pratiques et les astuces de TailwindCSS. Suivez les blogs, les tutoriels et les ressources en ligne pour enrichir vos connaissances et tirer le meilleur parti de cet outil puissant.

En suivant ces conseils dans le cadre d’un projet professionnel complexe, vous pourrez exploiter pleinement les fonctionnalités de TailwindCSS, créer une interface utilisateur performante et maintenable, et optimiser la collaboration au sein de votre équipe de développement

Conclusion

L’utilisation de TailwindCSS peut être complexe en raison de sa syntaxe spécifique et de sa configuration détaillée. La gestion des nombreuses classes peut également être délicate. De plus, il est important de noter que certaines fonctionnalités spécifiques et l’accessibilité ne sont pas nativement prises en charge par TailwindCSS. Il est donc essentiel de prendre en compte ces limitations lors de l’utilisation de cet outil. Toutefois, malgré ces défis, TailwindCSS peut être considéré comme un assistant de style personnel qui permet de créer des designs époustouflants sans avoir à écrire de code CSS personnalisé pendant des heures.

Avant de nous séparer, j’aimerais vous offrir un petit cadeau en reconnaissance de cette agréable lecture. Voici une bibliothèque de composants stylisés avec Tailwind CSS qui pourrait vous être utile à l’avenir.