svg-layout-designer-react/docs/DevDocs/Pages/Tailwind.md

Tailwind CSS

Tailwind CSS est un framework CSS proposant des classes utilitaires comme flex, pt-4, text-center. Ce framework permet d'optimiser notament la génération de css et d'éviter la duplication de code lorsque Vite compile le projet.

On peut confirmer cela en regardant le fichier .css généré après avoir lancé la commande pnpm build.

Il utilise index.scss si on veut regrouper les propriétés de tailwind dans une classe.

Il utilise tailwind.config.cjs pour configurer et étendre quelques propriétés comme la couleur.

Continuation de l'exemple de Premier Composant React

Rappelons les contraintes secondaires du bouton Home :

• Le bouton est positionné en bas sur la barre
• Le bouton change de couleur à chaque fois que le curseur entre dedans
• Le bouton possède un icône home

Essayons Tailwind avec React.

Je vous recommande fortement d'avoir la documentation de Tailwind sous les yeux pour suivre ce que font les propriétés.

Positionner avec Tailwind

Pour positionner le bouton tout en bas il faut modifier le layout de la barre

Voici le layout actuel du composant Bar.

// Bar.tsx
<div className='bar'>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <Home goHome={props.goHome} />
</div>

// index.scss
 .bar {
    @apply fixed z-20 flex flex-col top-0 left-0
      h-full w-16 bg-slate-100
  }

Traduisont donc ceci en css:

.bar {
  display: flex;          /* flex       */
  flex-direction: column; /* flex-col   */
  position: fixed;        /* fixed      */
  top: 0;                 /* top-0      */
  left: 0;                /* left-0     */
  z-index: 20;            /* z-20       */
  width: 4rem;            /* w-16       */
  height: 100%;           /* h-full     */
}

On va juste nous interesser sur flex et flex-col du coup car elles decident du layout des éléments enfants.

Pour espacer deux éléments dans un layout flex, il y a plusieurs manière de le faire :

• On peut rajout un div d'espacement avec la propriété grow
• On peut wrapper tous les BarIcon et utiliser place-content-between dans .bar

On va utiliser la premiere méthode, mais libre à vous la méthode.

Pour ajouter une classe sur React, on utilise le mot-clé className. C'est pour ne pas rentrer en conflit avec le mot-clé class servant de classe d'objet en JavaScript que ce mot-clé a été choisi.

// Bar.tsx
<div className='bar'>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <BarIcon>(...)</BarIcon>
  <div className='grow'></div>
  <Home goHome={props.goHome} />
</div>

Et voilà ! Aussi simple que cela.

Continuons avec les couleurs avec le curseur. Cette fois ci, on va utiliser React.

Utiliser Tailwind avec React

Revenons sur le composant Home définie par un simple bouton :

// Home.tsx
import React from 'react';

interface IHomeProps {
  goHome: () => void
}

export function Home({ goHome }: IHomeProps): JSX.Element {
  return (
    <button
      onClick={goHome}
    >
      Home
    </button>
  );
}

Dans ce composant, initialisons la liste des couleurs que l'on veut utiliser. Les couleurs de Tailwind sont définies sur cette page : https://tailwindcss.com/docs/customizing-colors.

Il nous suffit donc de juste mettre une liste de mots-clés de couleurs :

// Home.tsx
...

const colors = [
  'bg-state-500',
  'bg-gray-500',
  'bg-zinc-500',
  'bg-neutral-500',
  'bg-stone-500',
  'bg-red-500',
  'bg-orange-500',
  'bg-amber-500',
  'bg-yellow-500',
  'bg-lime-500',
  'bg-emerald-500',
  'bg-teal-500',
  'bg-cyan-500',
  'bg-sky-500',
  'bg-blue-500',
  'bg-indigo-500',
  'bg-violet-500',
  'bg-purple-500',
  'bg-fuchsia-500',
  'bg-pink-500',
  'bg-rose-500'
];

Et d'en sélectionner une au hazard.

// Home.tsx
const colors = [
  ...
];

export function Home({ goHome }: IHomeProps): JSX.Element {
  const index = Math.floor(Math.random() * (colors.length - 1));
  const selectedColor = colors[index];
  const className = `${selectedColor}`;
  return (
    <button
      className={className}
      type='button'
      onClick={goHome}
    >
      Home
    </button>
  );
}

Vous vous demandez peut-être pourquoi je n'ai pas juste interpolé une liste de couleurs (red, blue etc.) au lieux de la liste de propriétés de couleurs d'arrière-plan (bg-red-500, bg-blue-500...). Cela est expliqué par l'algorithme d'optimisation de fichier CSS de Tailwind.

Tailwind CSS purge les classes non utilisées dans son framework en scannant tous les fichiers, cela permet d'avoir un fichier css final léger mais en contrepartie, les opérations d'interpolation ne fonctionne pas. Vous pouvez vérifier la liste de type fichier scanné dans tailwind.config.cjs.

Note : Cela veut dire que l'on aurait pas créer un fichier de preload appelé colors.tw et ajouter ce format .tw dans le fichier de config pour qu'il le scanne. Ainsi pouvoir enfin interpoler dans le fichier .tsx mais cela revient au même finalement que de faire la liste.

On a donc enfin un arrière-plan qui change mais n'avons nous pas oublié quelque chose ? Oui ! Il faut changer la couleur quand la souris passe par dessus !

Cette fois-ci, pouvez-vous le faire sans lire la solution ?

Indice: Cela implique l'utilisation de state ;)

Réponse

Suivons donc l'indice et créons un hook d'état afin de sélectionner la couleur et de pouvoir la changer quand la souris passe dans le composant

// Home.tsx
export function Home({ goHome }: IHomeProps): JSX.Element {
  const defaultIndex = Math.floor(Math.random() * (colors.length - 1));
  const [index, setIndex] = useState<number>(defaultIndex);

  const selectedColor = colors[index];
  const className = `${selectedColor}`;
  return (
    <button
      className={className}
      type='button'
      onClick={goHome}
    >
      Home
    </button>
  );
}

Ensuite utilisons la propriété onMouseEnter pour jeter l'évent.

// Home.tsx
export function Home({ goHome }: IHomeProps): JSX.Element {
  const defaultIndex = Math.floor(Math.random() * (colors.length - 1));
  const [index, setIndex] = useState<number>(defaultIndex);

  const selectedColor = colors[index];
  const className = `${selectedColor}`;
  return (
    <button
      className={className}
      type='button'
      onClick={goHome}
      onMouseEnter={() => {
        const newIndex = Math.floor(Math.random() * (colors.length - 1));
        setIndex(newIndex);
      }}
    >
      Home
    </button>
  );
}

Et voilà vous avez enfin terminé avec Tailwind CSS !

Amusez-vous un peu avec Tailwind CSS pour ajuster le style du bouton (padding, margin, transitions etc.) et découvrir quelques propriétés.

Finissons ce tutoriel avec Heroicon.