Librairies TailwindCss pour vos projets frontend en JavaScript (JS)
Quâest-ce que Tailwind Css ?
Tailwind CSS est un framework CSS open source. La fonctionnalitĂ© principale de cette bibliothĂšque est, contrairement Ă dâautres frameworks CSS comme Bootstrap, quâelle ne procure pas une sĂ©rie de classes prĂ©dĂ©finies pour des Ă©lĂ©ments tels que des boutons ou des tables. Ă la place, Tailwind crĂ©e une liste de classes CSS « utilitaires » pouvant ĂȘtre utilisĂ©s pour ajouter un style Ă chaque Ă©lĂ©ment en les mĂ©langeant et en les agençant 3,4.
Par exemple, dans dâautres systĂšmes, il y aurait une classe message-warning
qui appliquerait le jaune comme couleur d'arriÚre-plan et du texte gras. Pour avoir ce résultat dans Tailwind, il faudrait appliquer un ensemble de classes créé par la bibliothÚque: bg-yellow-200
et font-bold
.
Source : Wikipedia
Le problĂšme avec Tailwind Css ?
Il est frĂ©quent, lors de lâajout de TailwindCSS Ă son projet web, de se rendre compte quâil nâexiste pas de components web permettant dâimplĂ©menter facilement des fonctionnalitĂ©s spĂ©cifiques comme les Tables, formulaires, champs, banniĂšre et bien dâautres dans les diffĂ©rentes technologies frontend comme React, Vue, Svelte, Astro .
Les solutions possibles ?
Pour rĂ©gler ce problĂšme, des dĂ©veloppeurs de par le monde ont mis en place des librairies components pour diverses technologies et qui permettent dâarriver Ă cet objectif. Comme librairie components, nous retrouvons :
- Daisy UI :
https://daisyui.com/ - Flowbite :
https://flowbite.com - PrelineUI :
https://preline.co - TailBlocks :
https://tailblocks.cc/ - Meraki UI :
https://merakiui.com/components - Mamba UI :
https://mambaui.com/ - Hyper UI :
https://hyperui.dev/ - Material Tailwind :
https://material-tailwind.com/ - WickedBlocks :
https://blocks.wickedtemplates.com/ - Lofi UI :
https://lofiui.co/
Je vous remercie dâavoir lu cet article et aimerais que vous le partagiez Ă vos collĂšgues ou votre Ă©quipe technique.
Ne manquez pas dâapplaudir et de suivre lâauteur ïžđïžïž
Suivez-moi sur les réseaux sociaux : X | LinkedIn | GitHub
Visiter les projets perso que je conçois : Homescript | Tiyalo | Houegbe | Shokays