--- # Qu'est ce que TailwindCSS ? --- Tailwind CSS est un framework... CSS, voilà.  --- Plus sérieusement ! --- Tailwind est donc un framework CSS créée par Adam Wathan dont le développement a commencé en 2017. Sa première stable release est sortie en mai 2019. A ce jour, Tailwind en est à sa 3ème version, sortie en septembre 2021. --- ## A quoi sert-il ? > Rapidly build modern websites without ever leaving your HTML. A la différence d'un framework comme Bootstrap, TailwindCSS permet de gérer ses styles sous forme classes utilitaires qui ont chacune leur propre utilité. --- Plutôt que de proposer des classes liées à des composants  *(Bootstrap)* --- Tailwind utilisera des classes dites utilitaires  ``` html <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 "> Default </button> ``` --- That's it ?  --- ### Quel intérêt ? Contrairement à un framework comme Bootstrap ou la personnalisation des classes devra passer par du CSS pure (ou un préprocesseur), il nous est possible, très facilement, d'intégrer n'importe quelle maquette en combinant les classes utilitaires fournies. --- ### Quelques exemples : Je souhaite un **container principal** **prenant tout l'écran** qui comportera un **fond vert** et un **margin** de **2rem**. **Dans ce container**, j'aurai **une div** de **255*255px**, **centrée** avec un **fond bleu**, un **margin** de **4rem** et un **texte**, lui même **centré** dans une **balise H1**, un texte **grande taille** et un **hover** qui changera sa **couleur (noir) en blanc**. --- Cela donnerait : {%youtube lAiK-ZlLxa8 %} --- ```html <div class="w-screen h-screen bg-blue-500 flex justify-center items-center m-4"> <div class="h-[255px] w-[255px] bg-red-500 flex justify-center items-center"> <h1 class="text-4xl hover:text-white transition-all duration-500"> Hi fellows ! </h1> </div> </div> ``` --- ### Et si j'ai des composants redondants ?  Il suffit d'appliquer la règle CSS @apply. On pourrait imaginer vouloir créer un type de bouton particulier, lui donner un ensemble de classes utilitaires avec Tailwind et lui donner un nom de classe comme un alias, qu'on répètera chaque fois qu'on voudra utiliser ce bouton. --- ### Autre avantage : Les breakpoints A l'heure du tout connecté, les différents devices de notre quotidien possèdent chacun leurs propres résolutions (dans une certaine mesure). Il est donc indispensable de penser chaque application de manière responsive. Et Tailwind a une solution plutôt intéressante pour ça ! --- #### Les breakpoints Pour conditionner les classes à des breakpoints, Tailwind a mis à dispo des prefixes prêts à l'emploi ... --- ...  Il suffit donc de faire précéder notre classe par le préfixe voulu --- ### D'autres préfixes sont à disposition ! *hover, focus, ring, before/after, dark, print, ltr/rtl...* **Le petit bonus :** ils sont stackable ! Je pourrais, par exemple, avoir besoin de définir une couleur de fond, disons un bg-blue-500, uniquement sur le breakpoint lg (au delà de 1024px de large) au focus de mon item. Cela donnerait : ```html lg:focus:bg-blue-500 ``` --- > C'est cool ton truc mais j'ai une maquette à intégrer au pixel près, du coup ça marchera pas ! Eeeeeh, pas si vite Johnny ! --- Tailwind, depuis sa version 2.1, execute son rendu avec un compilateur. Au lieu de générer tout un tas de règles à l'avance, qui augmenterai la taille et ralentirait la vitesse d'exécution du build, Tailwind génère chaque rendu à la demande, uniquement avec ce dont il a besoin pour exécuter les règles que vous aurez utilisé. ... --- ... Pour en revenir à la remarque de Johnny, l'utilisation du compilateur just in time, va également permettre à l'utilisateur (toujours Johnny), de personnaliser les classes de Tailwind à la volée ! ... --- ... Prenons l'exemple d'un container lambda, dont la largeur doit être de 100px. Dans ses utilitaires, Tailwind met à disposition l'élément "width", avec des valeurs en REM. Pour ce cas précis, en suivant la doc, je serais pris entre 2 valeurs, 24 (96px) et 28 (112px). Aie. ``` html <div class="w-24"></div> ou <div class="w-28"></div> ``` ... --- ... C'est là que just in time intervient ! Comme dis précédemment, j'ai besoin d'une valeur précise, soit 100px. J'écrirai donc la classe de cette manière : ```html <div class="w-[100px]"></div> ``` Idem pour les couleurs, Tailwind propose une gamme de couleurs prête à l'emploi, mais si j'ai une couleur précise à utiliser, il me suffira de faire : ```html <div class="bg-[#000000]"></div> au lieu de <div class="bg-black"></div> ``` --- TailwindCSS propose une quantité assez incroyable d'utilitaires et une doc très complète qu'il me sera difficile de résumer en 15min, je vous laisse donc le soin d'aller y jeter un oeil : https://tailwindcss.com/ --- Il existe également une chaine YouTube nommée **Tailwind Labs** qui expliquera bien mieux que moi toutes les possibilités offertes par ce framework https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ Et un code sandbox (playground) pour tester le framework : https://play.tailwindcss.com/ --- ### Des questions ?  ---  --- Le/la prochain.e nominé.e sera : --- ## Ons !