DaisyUI, ou comment styliser votre POC en un éclair.
Il y a deux ans, en faisant ma veille technologique, je tombait sur un article, qui parlait d’une palanquée d’extensions pour TailwindCss.
À ce moment, la célèbre librairie CSS était en pleine éclosion.
Parmi les extensions citées dans cet article, une m’attire particulièrement notamment grâce à son design, et ça façon de présenter les choses: daysiUI.
Je me décide donc de tester cette extension.
Et, très vite, je me rend compte que l’extension est encore trop « fouillie » et pas aboutie pour mon usage personnel ni pour un usage en agence avec parfois des maquettes particulièrement élaborées…
Deux années passent, et me voilà occupé de développer un POC d’outil de gestion pour une association. Un projet très intéressant que je pense d’ailleurs documenter dans un prochain article de blog.
Pour ce petit projet, la stack technique est plutôt simple: Remix, Strapi et Tailwind pour le style.
Le but est de développer ce POC rapidement, de le présenter et avoir une version utilisable au plus tôt.
Mais ayant malgré tout un attrait pour le design, je ne peux pas et ne veux pas livrer quelque chose de vraiment pas joli visuellement, mais je ne veux pas y passer trop de temps non plus.
Étant donc à la recherche d’une solution efficace pour styliser mon projet, je repense à daysiUI, cette extension qui m’avait marqué il y a deux ans. Curieux de voir comment elle a évolué depuis, je décide de lui donner une seconde chance. Entre temps, une nouvelle version majeure est sortie et, a emmenée avec elle, quelques améliorations, en optimisant la DX, et en agrandissant la liste de composants disponibles.
Son intégration dans mon projet s’est fait naturellement et efficacement. Je découvre également une documentation claire et bien structurée.
Pour l’installation, rien de plus simple, une commande npm install, une extension à inclure dans votre fichier tailwind.config.js et le tour est joué !
Au fil du développement, je remarque que daysiUI ne se contente pas d’améliorer l’aspect visuel, mais aussi, elle contribue à accélérer mon développement global. Les classes de Tailwind, associées aux composants stylisés de daysiUI, me permettent de concilier rapidité et esthétique.
Egalement, on peut citer comme point positif, la qualité du code fournis pour les composants et la façon dont tous les composants sont rendu accessibles. Chose parfois délaissé avec ce type d’outil.
Par exemple voici un cas d’utilisation de daysiUI pour un bouton stylisé.
<button class="btn-primary">Valider</button>Ce bouton est le cas d’utilisation le plus simple, mais la bibliothèque de composants, vous propose des solutions beaucoup plus élaborées comme, des modales, des zone Hero, des notifications « toast », sous forme de code html prêt à l’emploi ou même en jsx. Un bonheur de simplicité.
Cette expérience révèle comment une extension bien pensée peut transformer une simple utilisation de Tailwind en une expérience de développement plus fluide et agréable.
Pour conclure, DaisyUI se positionne, pour moi comme étant un excellent outil de stylisation rapide. Mais malgré la possibilité de personnaliser les différents thèmes, il reste pour moi, un mauvais choix dans le cadre d’un projet complexe avec des maquettes élaborées.
Cependant, cet outil peut très bien se positionner comme choix technique dans le cadre d’un projet avec un petit budget, avec du temps d’intégration limité et appliqué dans le processus de création des maquettes. D’ailleurs un projet Figma listant les composant disponnible est accessible ici.
