Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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 , par Bill Fassinou

141PARTAGES

11  1 
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 ?

Qu'en pensez-vous ?

Voir aussi

Spectre.css, un framework front-end léger, responsive et moderne, est disponible dans sa version 0.5.5

La version 5.0 du framework Bootstrap va supprimer jQuery, sa plus grande dépendance côté client pour du pur JavaScript

Google dévoile le framework Material Design Lite pour la conception de sites avec des spécifications Material Design

CSS s'enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript après l'approbation du World Wide Web Consortium

Un chercheur trouve une méthode CSS pour suivre les mouvements de la souris qui pourrait servir à pister les internautes avec JS désactivé

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de Julien_G
Membre averti https://www.developpez.com
Le 02/03/2020 à 10:38
Mouai .... vu les prix je vais rester sur les nombreux frameworks gratuits de qualité
7  2 
Avatar de anykeyh
Membre confirmé https://www.developpez.com
Le 02/03/2020 à 20:53
Contrairement à mon voisin du dessus, au vu du nombre de composants et de l'usage de TailwindCSS derriere (ce qui rend le composant modifiable aisement une fois qu'on connais les classes CSS), je trouve le prix excellent au vu du temps gagné.
2  0 
Avatar de Pierre Louis Chevalier
Expert éminent sénior https://www.developpez.com
Le 03/03/2020 à 16:48
Citation Envoyé par nagadef Voir le message
Je suis avec intérêt le projet Tailwind depuis sa création.
Je me suis inscrit au projet Tailwind UI, mais désinscrit dès avoir connu son prix, 149 $ single use... presque 600 $ en illimité.
Pour une entreprise ce montant ne représente rien, en comparaison des coûts humains.
2  0 
Avatar de air-dex
Membre expert https://www.developpez.com
Le 03/03/2020 à 16:44
Citation Envoyé par Julien_G Voir le message
Mouai .... vu les prix je vais rester sur les nombreux frameworks gratuits de qualité
150 balles l'accès anticipé ! Niveau rapport qualité-prix Bootstrap peut dormir tranquille.
1  0 
Avatar de namavic
Membre régulier https://www.developpez.com
Le 03/03/2020 à 9:57
Citation Envoyé par Julien_G Voir le message
Mouai .... vu les prix je vais rester sur les nombreux frameworks gratuits de qualité
Quelques exemples de "frameworks gratuits de qualité" ?
0  0 
Avatar de nagadef
Futur Membre du Club https://www.developpez.com
Le 03/03/2020 à 11:55
Je suis avec intérêt le projet Tailwind depuis sa création.
Je me suis inscrit au projet Tailwind UI, mais désinscrit dès avoir connu son prix, 149 $ single use... presque 600 $ en illimité.
C'est pas comme ça que le framework va se répandre les gars !
Je reste sous la valeur sur et ojd mature qu'est BS4.

PS :
je crois que la quantité de class CSS à insérer dans le code HTML est pire avec Tailwind que Bootstrap
0  0