Tailwind UI: composants CSS et templates à portée de main

Les frameworks CSS axés sur l'utility-first sont relativement nouveaux, loin du cadre CSS sémantique tel que Bootstrap ou Foundation, livré avec un ensemble prédéfini de classes CSS que vous pouvez utiliser pour styliser votre site Web. Au lieu de cela, Tailwind CSS est un cadre utilitaire de bas niveau qui vous donne tous les éléments de base dont vous avez besoin pour créer des conceptions personnalisées sans aucun style imposé.

Cette approche peut sembler demander plus de travail au début, mais elle rend la création de sites Web plus rapide et plus facile une fois que vous vous y êtes habitué. Et comme Tailwind CSS ne génère que le CSS dont vous avez besoin, il est beaucoup plus petit et rapide que les frameworks CSS traditionnels.

Tailwind UI est une nouvelle bibliothèque CSS basée sur Tailwind CSS et fournit un ensemble de composants d'interface utilisateur réactifs et réutilisables. Elle est conçue pour proposer des éléments déjà préfabriqués en s'appuyant sur Tailwind CSS, c'est également un excellent moyen d'observer les bonnes pratiques de la core team pour développer ses propres composants avec Tailwind CSS. La bibliothèque comprend une variété de composants, notamment des boutons, des cartes, des formulaires et une grille de mise en page.

Tous les composants sont réactifs et faciles à personnaliser. Les composants sont maintenus par l'équipe de Tailwind, vous pouvez récupérer le code basique en HTML, mais également en React et Vue. Idéal en fonction du type de projet tout en gardant une harmonisation visuelle. Il est également possible de récupérer des pages complètes, comme des landing pages, des types de pages e-commerce ou encore des pages de dashboard avec de la gestion diverse d'informations.

Ces pages sont conçues pour répondre aux problématiques du mobile et sont développées en mobile first. Le portage sur mobile n'est donc pas à prévoir. Tailwind UI est fortement utilisé pour réaliser des POC ou MVP, mais de plus en plus de nouveaux projets se basent sur celui-ci pour construire leurs interfaces.

Tailwind UI n'est pas adapté à toutes les situations, cela va dépendre de vos envies et de votre budget, il y a des contraintes d'utilisation, mais face aux avantages que cela peut procurer le choix est rapidement fait. Noté quand même que la licence d'exploitation de Tailwind UI est de 250$ à vie, cela est vite rentabilisé sur un premier projet sans compter sur le gain de temps et la maintenance des composants.

L'assemblage d'une interface est rapide et modulable à souhait, contrairement aux autres libraires / frameworks CSS Tailwind UI est très malléable et vous permet de récupérer des exemples rapidement de copier le code et de le rendre fonctionnel en quelques minutes. Le fait d'avoir une librairie « Utility-First » est bien plus facile à gérer dans le temps avec des class que tout développeur peut comprendre sans devoir forcément connaitre les spécificités de la solution, au début cela est un peu perturbant, mais par la suite les équipes capitalisent sur leurs connaissances et la fluidité de code s'installe rapidement.

Petites notes aux développeurs, pour mieux vous y retrouver au début je vous recommande d'utiliser des plug-ins VScode qui permettent au survol d'une class d'avoir la traduction en CSS classique, au-delà des class fortement utiliser comme les background-color ou les tailles de polices certaines class sont très spécifiques.

C'est un outil magique pour la création de POC ou MVP car Tailwind est assez personnalisable pour avoir un rendu qui ne fait pas l'effet bootstrap ou tous les sites se ressemble tout en s'appuyant sur une structure commune qui est déjà développée en amont.

L’aspect modulaire des composants permet de rapidement créer des écrans en fonction de vos besoins, de rajouter des éléments facilement s’il vous en manque et d'être compatible en mobile par défaut, un vrai gain de temps pour le développement.

Inconvénients à l'utilisation de Tailwind UI

Il y a des contraintes d'utilisation de Tailwind UI, cela va dépendre de votre façon de travailler, mais le plus gros problème aujourd'hui et de n'avoir aucune ressource type Figma ou Adobe XD des composants existants pour modéliser les interfaces avant de passer par l'étape de développement. C'est une demande qui est récurrente et qui possède déjà une réponse de la core team, en effet aujourd'hui la création de composant en interne ne passe par forcément par une demande d'un créatif et ne part pas d'une base graphique. Le deuxième gros inconvénient est que Tailwind CSS est basé sur des choix forts et qu’ils sont bien souvent liés aux bonnes pratiques de développement.

Avec des espacements bien définis, des tailles et des alignements qui respectent les contraintes d’accessibilité et permettent de jouer leurs rôles dans les web core vitals. Cela garantit une certaine qualité de code, mais sans avoir les prérequis de Tailwind en tête vous n'arriverez jamais à intégrer une page venant d'un créatif qui ne connait pas les règles de Tailwind.

Pour terminer le coût peut en rebuter quelque un, malgré le fait que cela soit rentable rapidement, mais juste dans une démarche de développement ou de test cela n'est pas forcément justifié d'investir 250$ dans la licence.

Actuellement disponible pour React et Vue, Headless UI est une librairie qui est proposée par le laboratoire de Tailwind. L'idée vient du constat où nous avons beaucoup de gestion d'état pour des éléments basiques, comme des boutons switch, radio, tab.. que cela pourrait se mutualiser dans une librairie commune à chaque projet.

Headless UI est donc une alternative au fait de devoir répéter des gestions d'état sur des éléments d'interface simple qui ne nécessite pas d'être piloté par une gestion d'états avec Redux par exemple avec React. L'implémentation est rapide, vous n'avez qu'un composant à utiliser dans vos interfaces.

Le concept est poussé jusqu'au point de facilité les effets de transitions, ce n'est pas la première librairie à proposer cette fonctionnalité, mais elle est facilement implémentable avec Tailwind.