{"id":1541,"date":"2022-09-17T19:08:59","date_gmt":"2022-09-17T17:08:59","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=1541"},"modified":"2022-09-23T08:06:29","modified_gmt":"2022-09-23T06:06:29","slug":"presentation-du-framework-tailwind-css","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/presentation-du-framework-tailwind-css\/","title":{"rendered":"Pr\u00e9sentation du framework Tailwind CSS"},"content":{"rendered":"\n

Faire du CSS sans une ligne de code CSS<\/h2>\n\n\n\n

Tailwind CSS<\/a> est relativement r\u00e9cent dans le monde des frameworks CSS. La premi\u00e8re version est sortie en 2019 soit 4 ans apr\u00e8s la premi\u00e8re version de Bootstrap. Ce projet open source poss\u00e8de une assez forte communaut\u00e9 et il est tr\u00e8s suivi sur Github. Le slogan d\u00e9crit exactement la philosophie : \u00ab\u00a0Rapidly build modern websites without ever leaving your HTML.\u00a0\u00bb<\/strong>. La principale caract\u00e9ristique de ce framework est de proposer un ensemble de classes CSS pr\u00e9-\u00e9crites \u00e0 utiliser directement dans le code HTML. L’objectif est donc de r\u00e9aliser enti\u00e8rement la mise en page avec les classes propos\u00e9es par Tailwind.<\/p>\n\n\n\n

Tailwind propose un fichier de configuration JavaScript pour personnaliser l’ensemble des classes. On peut par exemple modifier les codes couleurs par d\u00e9faut, les polices, les espacements, etc. L’installation se fait soit par la CLI Tool qui propose des commandes pour compiler son projet ou soit en plug-in postCSS qui permet d’utiliser les compilateurs Sass ou Less<\/strong>. Au niveau de la compatibilit\u00e9 avec les navigateurs, le framework fonctionne sur les navigateurs r\u00e9cents, mais il ne prend pas en charge IE 11.<\/p>\n\n\n\n

\"Tailwind
Tailwind CSS un framework moderne pour du responsive web design<\/figcaption><\/figure>\n\n\n\n

Exemple de code HTML avec Tailwind CSS<\/h2>\n\n\n\n

En reprenant l’exemple de la page d’accueil du site de Tailwind CSS qui repr\u00e9sente un composant carte<\/strong> avec une photo de profil, une description, le nom de la personne et son statut, on remarque que tout le code CSS est ajout\u00e9 dans les attributs classes des blocs HTML. Aucun autre style ne vient s’ajouter en passant par du CSS personnalis\u00e9.<\/p>\n\n\n\n

\"Composant
Composant carte avec Tailwind CSS<\/figcaption><\/figure>\n\n\n\n
<figure class=\"bg-slate-100 rounded-xl p-8 dark:bg-slate-800\">\n  <img class=\"w-24 h-24 rounded-full\" src=\"\/palm.jpg\" alt=\"\" width=\"384\" height=\"512\">\n  <div class=\"pt-6 space-y-4\">\n    <blockquote>\n      <p class=\"text-lg\">\n        \u201cTailwind CSS is the only framework that I've seen scale\n        on large teams. It\u2019s easy to customize, adapts to any design,\n        and the build size is tiny.\u201d\n      <\/p>\n    <\/blockquote>\n    <figcaption class=\"font-medium\">\n      <div class=\"text-sky-500 dark:text-sky-400\">\n        Sarah Dayan\n      <\/div>\n      <div class=\"text-slate-700 dark:text-slate-500\">\n        Staff Engineer, Algolia\n      <\/div>\n    <\/figcaption>\n  <\/div>\n<\/figure><\/code><\/pre>\n\n\n\n
Le code est relativement bien pens\u00e9 et permet de r\u00e9aliser facilement des mises en page CSS<\/strong> avec seulement du code HTML. Cependant c’est une technique qui ne sera pas adapt\u00e9e \u00e0 chaque d\u00e9veloppeur web. Certains codeurs pr\u00e9f\u00e9reront utiliser des styles CSS afin de bien s\u00e9parer la couche HTML de l’aspect visuel de son projet. On peut se retrouver avec de longues classes CSS qui peuvent \u00eatre difficilement lisibles surtout dans une page un peu longue.<\/p>\n\n\n\n
<a class=\"group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-indigo-50 text-indigo-600 hover:bg-indigo-200 hover:text-indigo-700 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500 mt-8\" href=\"\/docs\/utility-first\">\n  Learn more <span class=\"sr-only\">, utility-first fundamentals<\/span>\n  <svg class=\"overflow-visible ml-3 text-indigo-300 group-hover:text-indigo-400 dark:text-slate-500 dark:group-hover:text-slate-400\" width=\"3\" height=\"6\" viewBox=\"0 0 3 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M0 0L3 3L0 6\"><\/path><\/svg>\n<\/a><\/code><\/pre>\n\n\n\n
Test de performance du framework<\/h2>\n\n\n\n
La logique de Tailwind est d’utiliser au plus possible les classes pr\u00e9-\u00e9crites dans les balises HTML. Cette fa\u00e7on de faire peut engendrer des probl\u00e8mes de performance<\/strong> et d’optimisation en surchargeant le DOM. En comparant les performances de la page d’accueil de la documentation de Tailwind \u00e0 celle de Bootstrap avec l’outil PageSpeed Insights nous pouvons relever des diff\u00e9rences notables. Utiliser la page d’accueil de la documentation pour cette analyse de performance permet de bien comparer 2 pages \u00e9quivalentes sans images \u00e0 charger ou tr\u00e8s peu.<\/p>\n\n\n\n
\"\"
Performance de la page https:\/\/tailwindcss.com\/docs\/installation<\/a> avec la version 3.1.8<\/figcaption><\/figure>\n\n\n\n
\"\"
Performance de la page https:\/\/getbootstrap.com\/docs\/5.2\/getting-started\/introduction\/<\/a> avec la version 5.2<\/figcaption><\/figure>\n\n\n\n
Les plus grandes diff\u00e9rences que l’on peut remarquer sont sur les m\u00e9triques Time to Interactive<\/strong> et Total Blocking Time<\/strong> qui sont largement sup\u00e9rieures sur la page d’accueil de la documentation de Tailwind. La m\u00e9trique Interaction to Next Paint<\/strong> est une donn\u00e9e exp\u00e9rimentale qui analyse un ensemble d’action de l’utilisateur afin de mesurer la r\u00e9activit\u00e9 de la page. On peut remarquer que l\u00e0 encore le framework Bootstrap est plus rapide en performance. Attention cependant \u00e0 l’interpr\u00e9tation de ces r\u00e9sultats, car peut \u00eatre que certains scripts de la documentation viennent alterner ces m\u00e9triques. Il faudrait faire des tests de performance en partant sur une base vide et en comparant chaque composant.<\/p>\n\n\n\n
La biblioth\u00e8que de composants Tailwind UI<\/h2>\n\n\n\n
En plus du framework de base, les cr\u00e9ateurs de Tailwind ont d\u00e9velopp\u00e9 Tailwind UI<\/a> qui est une biblioth\u00e8que incluant plus de 500 composants et plusieurs templates tout faits \u00e0 utiliser pour ses projets personnels et professionnels. Les templates ainsi que la plupart des composants sont payants en passant par l’achat d’une licence \u00e0 vie pour acc\u00e9der \u00e0 toute la librairie. C’est une offre tr\u00e8s int\u00e9ressante au vu de l\u2019ensemble du travail r\u00e9alis\u00e9 par l\u2019\u00e9quipe derri\u00e8re Tailwind.<\/p>\n\n\n\n
De nombreux types de composants<\/strong> sont d\u00e9j\u00e0 cr\u00e9\u00e9s comme les composants bouton, banni\u00e8re, header, footer, inscription \u00e0 la newsletter, sidebar, article de blog, statistiques, colonnes de prix, etc. que l’on peut personnaliser. Que ce soit pour un petit projet ou un site professionnel, tous ces composants permettent de gagner beaucoup de temps de d\u00e9veloppement tout en ayant une base bien optimis\u00e9e.<\/p>\n\n\n\n
Avoir quelques connaissances en CSS<\/h2>\n\n\n\n
Ne pas \u00e9crire du code CSS ne veut pas dire qu’il ne faut pas conna\u00eetre le CSS pour maitriser ce framework. Pour en profiter pleinement, il faut avoir quelques bases en CSS<\/strong>. Comme tout se passe avec les classes propos\u00e9es par Tailwind CSS (police, marge, espacement, couleur, ombre, etc.) il faut conna\u00eetre les principales propri\u00e9t\u00e9s CSS afin de savoir les exploiter.<\/p>\n\n\n\n
Enfin ce framework tire profit du standard des flexbox pour l’alignement des \u00e9l\u00e9ments. Un syst\u00e8me de media query similaire \u00e0 celui de Bootstrap est utilis\u00e9 pour afficher une page responsive selon des breakpoints ou l’on peut utiliser un syst\u00e8me de grille. Tailwind CSS est un framework l\u00e9ger qui une fois compress\u00e9 ne p\u00e8se que 10kB ce qui permet d’avoir un chargement tr\u00e8s rapide m\u00eame sur mobile. <\/p>\n\n\n\n\n