Premier pas avec... Daisy UI

Je travaille sur ce site de présentation professionnelle depuis environ quatre ans. La première version de ce site était une page statique unique, entièrement en HTML/CSS/JavaScript. J'ai ensuite fait évoluer cette version vers Nuxt 3, avec un design travaillé personnellement sur la suite Adobe. Cependant, cette version précédente avait un air d'inachevé. L'aspect visuel me plaisait, mais il restait brut et incomplet à mes yeux.

Cela était dû au manque de temps et d'expérience en design et en identité visuelle, qui ne sont pas mon cœur de métier. C'est précisément pour cette raison que l'utilisation de DaisyUI/Tailwind prend tout son sens.

Lors d'un projet précédent, j'ai été amené à travailler sur une partie front-end basée sur le framework Bootstrap. Quelques-unes de mes lectures techniques du moment m'ont alors fait découvrir Tailwind CSS. La promesse : obtenir une page web propre et réactive sans avoir à écrire une seule ligne de CSS.

De prime abord, j'ai trouvé l'idée intéressante. Vous avez peut-être déjà eu besoin, comme moi, de styliser un petit projet ou une page web sans avoir vraiment d'idée de rendu ou de temps à consacrer à l'aspect visuel. La promesse m'est tout d'abord apparue alléchante !

Cependant, au fil des échanges avec d'autres collègues développeurs et intégrateurs/designers, dont l'avis était beaucoup plus négatif, j'ai eu du mal à me faire un avis clair et tranché sur cette technologie. Développement certes plus rapide, mais au détriment d'autres aspects comme un code HTML plus lourd à lire, un mélange de classes CSS et une extensibilité qui peut vite devenir pénible. Bref, c'est un sujet que j'ai mis de côté à ce moment-là, faute de mise en application.

Mais il y a quelques mois, j'ai découvert la librairie DaisyUI. Cette surcouche de Tailwind permet de mettre facilement en place des composants avec un effort mis autour de l'accessibilité. Je me suis alors laissé prendre au jeu, en me mettant au défi de briser toute la stack design/CSS précédente de ce site et de tout reprendre avec cette librairie.

<div class="mockup-code">
  <pre data-prefix="1"><code>npm i daisyui</code></pre>
  <pre data-prefix="2"><code>installing...</code></pre>
  <pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
</div>

Et voilà le résultat : vous naviguez actuellement sur cette version du site après une refonte de seulement quelques heures. J'ai réussi à remettre en place une structure HTML beaucoup plus uniforme et à factoriser les feuilles de styles en rassemblant 90 % de mon SCSS.

En quelques mots, voici les avantages que j'aimerais mettre en avant :

Pour un développeur backend, c'est un outil précieux, car nous n'avons pas toujours un intégrateur designer sous le coude pour nos projets.

• Il s'adapte parfaitement aux petits projets.
• Résultats rapides et rendu professionnel.
• C'est une librairie simple à installer et à mettre en œuvre.

Cependant, il y a aussi des inconvénients :

• Un développeur expérimenté identifiera tout de suite que le mélange des préoccupations va forcément complexifier la reprise du code.
• On perd un peu la main sur le visuel, et dès lors qu'on souhaite un élément spécifique, cela devient vite fastidieux.
• Les fichiers SCSS se vident, mais le code HTML s'alourdit avec les nombreuses classes nécessaires au fonctionnement.
• Le passage par un outil de build (PostCSS) est presque impératif pour tirer pleinement parti de la librairie.

Ce retour d'expérience n'a pas pour but de vous former à DaisyUI/Tailwind CSS, ni de vous convaincre de son caractère bon ou mauvais.
Cependant, si comme moi, vous avez eu du mal à y trouver un intérêt ou si vous faisiez partie des sceptiques, je vous encourage vivement à l'expérimenter sur de petits projets. Pour ma part, j'en ressors convaincu de son potentiel. Toutefois, il est important de l'utiliser à bon escient et de ne pas l'appliquer systématiquement à tous les projets, en particulier ceux de grande envergure.