Librairies TailwindCss pour vos projets frontend en JavaScript (JS)

Photo by Joshua Earle on Unsplash

Qu’est-ce que Tailwind Css ?

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

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