Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

    Tailwind UI : des composants d’interface utilisateur conçus par les créateurs de Tailwind CSS
    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

    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é
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre averti
    Mouai .... vu les prix je vais rester sur les nombreux frameworks gratuits de qualité

  3. #3
    Membre confirmé
    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é.

  4. #4
    Membre régulier
    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é" ?

  5. #5
    Futur Membre du Club
    Trop cher
    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

  6. #6
    Membre expert
    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.
    "Ils ne savaient pas que c'était impossible alors ils l'ont fait." Mark Twain

    Mon client Twitter Qt cross-platform Windows et Linux. (en cours de développement).

  7. #7
    Expert éminent sénior
    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.
    Ne prenez pas la vie au sérieux, vous n'en sortirez pas vivant ...