Tailwind UI, des composants d'interface utilisateur conçus par les créateurs de Tailwind CSS,

Qui permettent de créer des styles personnalisés sans jamais quitter le HTML, selon ses concepteurs

Le 2 mars 2020 à 09:55, par Bill Fassinou

344PARTAGES

Les développeurs de Tailwind CSS ont récemment présenté Tailwind UI, un ensemble de composants d’interface graphique prêt à l’emploi. C’est une collection de brides HTML, pré-construites et entièrement réactives, que vous pouvez utiliser dans vos projets Tailwind. Selon ses auteurs, Tailwind UI est une bibliothèque de composants uniquement en HTML et n'inclut aucun JavaScript. Les composants de Tailwind UI ont été créés à l'aide de Tailwind CSS v1.2.0. Ils dépendent aussi de certaines extensions de la configuration par défaut de Tailwind.

Selon la documentation de Tailwind CSS, c’est un framework CSS de bas niveau hautement personnalisable qui vous donne tous les éléments de base dont vous avez besoin pour créer des conceptions sur mesure sans avoir à vous battre pour passer outre les styles de pensée ennuyeux. L’idée derrière le framework Tailwind CSS est de réduire la charge de travail des développeurs. Ses créateurs jugent que la grande majorité des autres frameworks CSS en font trop. Ils causeraient plus de problèmes qu’ils n’en résolvent.

« Ils sont livrés avec toutes sortes de composants préconçus comme des boutons, des cartes et aussi des alertes qui peuvent vous aider à agir rapidement au début, mais qui causent plus de douleur qu'ils ne guérissent lorsque vient le temps de faire ressortir votre site avec un design personnalisé », ont-ils déclaré à propos des autres frameworks CSS. C’est pour cela qu’ils ont adopté un autre concept avec Tailwind. Au lieu de composants préconçus à l'avance, Tailwind fournit des classes d'utilité de bas niveau qui vous permettent de créer des conceptions complètement personnalisées sans jamais quitter votre HTML.

Chaque utilitaire Tailwind est livré avec des variantes réactives, ce qui vous permet de construire des interfaces réactives sans avoir recours à des CSS personnalisés. Tailwind CSS utilise un préfixe intuitif {screen}: qui permet de remarquer facilement les classes réactives dans votre balisage tout en gardant le nom de la classe d'origine reconnaissable et intact. Par ailleurs, Tailwind fournit des outils permettant d'extraire des classes de composants à partir de modèles utilitaires répétés, ce qui facilite la mise à jour de plusieurs instances d'un composant à partir d'un seul endroit.

Selon sa documentation, Tailwind est écrit en PostCSS et configuré en JavaScript. Pour ses développeurs, cela signifie que vous avez toute la puissance d'un véritable langage de programmation au bout des doigts.

Selon les critiques, « Tailwind est fantastique ». Au début, l’on peut se plaindre d’un mauvais balisage quand on l’utilise. Cependant, ils estiment qu’après un temps d’utilisation, on se rend compte qu’on a une interface utilisateur plus cohérente, avec beaucoup moins de CSS écrits à la main. « C’est mieux par rapport à Bootstrap», selon certains.

D’après ce qu’ils disent, en utilisant Bootstrap, vous vous retrouvez avec beaucoup de déclarations de classe verbeuses comme “btn btn-link btn-primary btn-xs danger”, mais vous avez toujours besoin de beaucoup de petites règles “marge-gauche : 3px” pour pousser et tirer les choses en place. La plupart des autres bibliothèques CSS subissent le même sort. D'un autre côté, les sites sans frameworks optent généralement pour une convention comme “BEM” (block-element-modifier). Mais selon eux, BEM semble être le pire des deux mondes.

BEM semble abandonner les feuilles de styles en cascades, mais utilise toujours des noms de classe verbeux. En outre, d’autres pensent que Bulma, un autre framework CSS, fait aussi bien que Tailwind CSS. Son principal avantage est qu’il permet de réduire lui aussi votre charge de travail. Il offre des composants qui vous exemptent de faire des choses comme assembler des ombres, des coins arrondis, des bordures, etc. Au lieu de rassembler tout ceci pour faire une carte, l’on peut juste utiliser la classe “cart” de Bulma et définir des paramètres globaux pour les couleurs et les dimensions.

Source : Tailwind UI

Et vous ?