# 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](https://tailwindcss.com/) 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. ```tsx // Bar.tsx
(...) (...) (...) (...)
``` ```scss // 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: ```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. ```tsx // Bar.tsx
(...) (...) (...) (...)
``` 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 : ```tsx // Home.tsx import React from 'react'; interface IHomeProps { goHome: () => void } export function Home({ goHome }: IHomeProps): JSX.Element { return ( ); } ``` 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 : ```tsx // 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. ```tsx // 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 ( ); } ``` 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 ```tsx // Home.tsx export function Home({ goHome }: IHomeProps): JSX.Element { const defaultIndex = Math.floor(Math.random() * (colors.length - 1)); const [index, setIndex] = useState(defaultIndex); const selectedColor = colors[index]; const className = `${selectedColor}`; return ( ); } ``` Ensuite utilisons la propriété `onMouseEnter` pour jeter l'évent. ```tsx // Home.tsx export function Home({ goHome }: IHomeProps): JSX.Element { const defaultIndex = Math.floor(Math.random() * (colors.length - 1)); const [index, setIndex] = useState(defaultIndex); const selectedColor = colors[index]; const className = `${selectedColor}`; return ( ); } ``` 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](Heroicon.md).