Tailwind vs Bootstrap en 2023 : lequel choisir, et pourquoi ?

[@MrTutOxX]

Encore une excellente vidéo, merci. :)

[@kodaps_fr]

Et bien merci pour les encouragements :)

[@59140Dunkerque]

Merci pour le contenu

[@kodaps_fr]

Avec grand plaisir :)

[@mohamedfall4159]

Merci monsieur pour les explications claires

[@kodaps_fr]

Avec plaisir :)

[@stephaneaudo9111]

En navigation (voile) on dit plutôt Vent arrière? Ce qui prend tous son sens quand on met le Spi.

[@flo70985]

Merci pour le comparatif, j'me lance dans tailwind :)

[@kodaps_fr]

Un très bon choix :)

[@nicolasboudot4215]

Je n'ai pas encore testé TailWind mais il me tente bien. Par contre, je me demande si le HTML n'est pas trop surchargé avec des classes utilitaire de partout ?

[@kodaps_fr]

Alors en pratique j’ai pas trouvé que ce soit beaucoup plus lourd à ce niveau là que Bootstrap. Et Tailwind permet ( avec le mot clef apply) de créer des classes réutilisables qui combinent des classes utilitaires, au besoin : tailwindcss.com/docs/functions-and-directives#apply

[@nicolasboudot4215]

@@kodaps_fr Top ! Ça a l'air très puissant, faut juste réussir à cadrer tout ça entre TailWind, Bootstrap, Sass, etc. Merci pour la réponse en tout cas !

[@kodaps_fr]

Avec plaisir :)

[@MrJohAA]

@@kodaps_fr L'intérêt de combiner des classes utilitaires dans une classe unique plutôt que de juste faire du Css ? Tailwind est pratique mais il n'apporte rien au fond à mon sens car il est tout à fait possible de créer ses propres classes utilitaires. D'autres framework font plus ou moins la même chose et proposent bien +. De plus si le design doit évoluer j'imagine pas la galère que de devoir se taper 50 classes dans son html pour comprendre laquelle retirer sans tout péter. Bref, dans le fond ça semble satisfaisant comme tu dis mais sur le long terme ça m'a l'air chronophage et galère. Rien de mieux que du css vanilla surtout que les composants peuvent avoir du css scopés sur la majorité des frameworks front JS. Tailwind apporte peu si on a de bonnes bases en css sinon une prise de tête pour comprendre du html trop fourni.

[@Pizatol]

Hello, je suis assez d'accord avec toi. Bootstrap assez pratique pour tester des trucs rapidement, mais les fameux button primary sont devenus clichés.. j'aime bien l'idée de considérer tailwind comme plus bas niveau que bootstrap. Merci pour tes contenus, toujours aussi intéressants !

[@kodaps_fr]

Merci pour les encouragements. C’est clair que Bootstrap c’est devenu cliché, si on veut pas ressembler a tous les petits voisins ça demande du travail pour casser le moule Bootstrap

[@laurentinengamifiyatete5697]

j'ai toujours voulu utilisé bootstrap mais ça me demande un peu plus de temps pour apprendre mais tailwind îl est vraiment bon il est facile à prendre à main vu que c'est son les propriétés CSS transformé en classe utilitaires et mieux nommer que le CSS je trouve avec tailwind on prendre possession vraiment de son design, le composant son facilement réutilisable et le fait de resté que sur la même html c'est vraiment bien

[@janick4577]

Merci pour cette vidéo. Lorsque que j'ai entamé une formation, on m'a montré Bootstrap. Je trouve que c'est la pire des chose à faire, difficile de comprendre les règles de Grid ou flebox avec ce genre de Framework. Du coup je suis parti sur le CSS from scratch car j'ai vite vu mes lacunes. Ensuite j'ai voulu essayer Tailwind, car le logo et leur page me plaisait( ouais ça part de rien des fois). Du coup j'ai adopté Tailwind, même en état débutant, car j'ai pris du plaisir avec lui. Et puis il à des grandes tailles contrairement à Bootstrap. Longue vie à Tailwind

[@kodaps_fr]

Boostrap c'est très bien pour faire avancer vite un projet, mais Tailwind c'est effectivement mieux pour comprendre ce qu'on fait - il faut dire que le Flexbox n'existait pas quand boostrap a été inventé, donc d'une certaine façon Boostrap essaie de répondre à une question à laquelle une meilleure réponse a déjà été donnée par le language CSS lui même. Un peu comme jQuery vs le JS vanilla :)

[@laurentinengamifiyatete5697]

Même chose que moi tailwind j ai commencé en voulant juste l essayé alors je suis bloqué avec lui et m a pris à mieux comprendre le CSS

[@DGDG0000000]

intéressant.

[@khraken3518]

Hello je viens de décourvrir ta chaine ! J'adore les sujets qui y sont traités =). J'avais une question à te poser : Tu utilises quoi pour le pré-rendu en "blur" des photos sur le site ecotree-hm ? J'avais cherché pour faire un effet style Gatsby avec Next mais je n'avais rien trouvé de convaincant ! Merci =)

[@kodaps_fr]

Merci :) Alors. La version courte c'est qu'en fait il y a deux images. Un Low Quality Image Placeholder (LQIP) (généré par script avec sharp) sur lequel je fais juste un blur initial en CSS, et sur lequel j'ai les classes "transition-opacity duration-500 ease-in opacity-100" ensuite sur l'image principale (la plus grosse quoi) je fais onLoad={() => setImageLoaded(true)} et dans cette fonction je passe l'opacité de la première image à 0, ce qui fait apparaitre la grosse quand elle a chargé. (c'est inspiré de Medium). Par contre j'ai pas utilisé le nouveau composant Image de Next 10 parce que ... c'était avant que Next 10 ne sorte (et parce que ça marche pas encore avec le composant serverless :)

[@khraken3518]

@@kodaps_fr Super! Merci pour de ta réponse ! =)

[@kodaps_fr]

Tiens, du coup plus en détail ça donne ça : dev.to/gosev/effet-zoom-de-medium-en-css-avec-nextjs-8j5 :)

[@khraken3518]

@@kodaps_fr Super! Merci Kodaps! Je vais y jetter un coup d'oeil sois-en sûr =)

[@teach8138]

Bonjour Monsieur, je suis étudiant en Allemagne, dans le cadre de mon mémoire de diplôme pour le titre d'ingénieur, je travaille avec Bootstrap + Tailwind CSS. J'ai regardé votre vidéo, je la trouve intéressante. Je comprends que vous avez déjà beaucoup d'expérience avec Teilwind et Bootstrap, pouvez-vous me dire pourquoi vous utilisez Bootstrap sur votre site Web et pourquoi vous utilisez Tailwind sur d'autres sites Web ? Selon vous, qu'est-ce qui est le mieux pour un développeur Bootstrap ou Tailwind ? Trouvez-vous des inconvénients à Tailwind par rapport à Bootstrap ? Si possible, citez de quelques inconvénients + avantages de Bootstrao et Tailwind Je vous remercie d'avance...keep going.

[@kodaps_fr]

Bonjour. Pour être honnête le choix de Bootstrap avait déjà été fait sur le site principal avant que je n'arrive, et aussi de toute façon j'aurais fait le même choix à l'époque parce que Tailwind n'existait pas encore au moment où le développement du site a commencé. Qui plus est il est plus facile de recruter quelqu'un de compétent en Bootstrap qu'en Tailwind, puisque les élèves sont formés majoritairement en Boostrap plutôt que Tailwind. J'ai utilisé Tailwind sur les sites annexes parce que.. j'avais envie d'apprendre Tailwind, et les gens dans mon équipe aussi ! Tailwind est plus agréable à utiliser et donne plus de possibilités (et est plus moderne dans sa façon de faire). Il vaut mieux par contre pour un étudiant apprendre Bootstrap parce que plus de sociétés l'utilisent, et que de toute façon apprendre les bases de Bootstrap donne un certain nombre d'outils pour apprendre Tailwind. Donc je recommande d'apprendre les deux, en commençant par Bootstrap.

[@sarahlachiheb1393]

Merci pour la vidéo :) ! J'aurais une petite question sur la compatibilité de deux librairies, est-ce que vous pensez qu'on peut utiliser Tailwind et Material UI ensemble ? Je suis très intéressée par les classes utilitaires de Tailwind et par les composants déjà prêt à l'emploi de Material UI. De mon côté, j'ai peur de rencontrer un blocage sur le maintien du design system et de perdre en performance/poids du projet.

[@kodaps_fr]

Alors MUI utilise la librairie Emotion, qui fait du CSS via le JS, alors que Tailwind de base utilise du (post)CSS, donc meme si les deux peuvent dans l'absolu coexister, je sais pas qui prendrait le pas sur qui en termes de priorité (je sais pas si le CSS via le JS devient pas du inline infine, qui aurait donc la priorité). Ceci étant dit MUI propose un guide pour intégrer Tailwind ici : mui.com/material-ui/guides/interoperability/#tailwind-css donc à priori c'est pas complètement délirant comme idée :)

[@sarahlachiheb1393]

Merci beaucoup pour votre réponse, je pense que je vais tenter le coup et voir si je rencontre des limites :)

[@moneyfr]

Tu saurais comment on peut target les enfants avec tailwind Div > p bg-pink Gagner en lisibilité

[@kodaps_fr]

Si j'ai bien compris ta question : si tu veux appliquer une class tailwind à un sélecteur CSS tu peux utiliser @apply, genre : div p { @apply bg-pink; } (ça appliquera un fond rose aux p qui sont dans une div)

[@moneyfr]

@@kodaps_fr Voila l'idée c'est t'as 3 card sur une home page qui appartiennent a une div et tu peux tous les target en meme temps sans ecrire 3 fois bg-pink etc #combinator

[@kodaps_fr]

@@moneyfr ok, bah imagine que tes cards sont dans une section avec l'id sectioncards, et qu'ils ont une class card, tu peux les adresser avec un truc comme "#sectioncards .card { @apply bg-pink; }" Après l'idée des classes utilitaires css, et la philosphie de tailwind, c'est plutôt justement de mettre la classe bg-pink là où elle est affichée, si c'est pour faire un fond rose avec un sélecteur CSS ça se fait directement aussi bien sans passer par tailwind. Si en plus tu es dans une boucle dans React, tu peux juste écrie ton bg-pink une seule fois, mais dans le composant :)

[@loltatum7455]

Yello ! Salut tout le monde ! J'aurais une question assez particulière après avoir vu cette vidéo, que voici : pouvons nous créé un projet avec bootstrap et tailwind en même temps ?

[@kodaps_fr]

Le problème c'est qu'il y aurait un conflit dans les définitions de certaines classes, par exemple p-1, p-2 etc. jusque p-5 existent dans les deux frameworks. Rien n'empêche dans l'absolu de charger les deux styles et le JS de bootstrap, mais par contre j'ai du mal à voir l'intéret :)

[@cotigasenegal]

En tant que petite agence Web, nous restons fidèle à Bootstrap. BS est très facilement personnalisable, il est de mauvaise fois de dire que BS est "cliché" (j'irais jusqu'à dire qu'ojd, c'est TW qui l'est...). La facilité a assimiler BS donne une plus grande liberté de créativité, là ou la complexité de TW "oblige à rester dans le moule". Et puis la tonne de class TW qui pourri le HTML... très peu pour nous. Bref, les arguments en faveur de BS ne manquent pas, là ou nous avons du mal à en trouver pour TW...

[@kodaps_fr]

@MrJohAA on peut ne pas apprécier tel ou tel framework, mais ici on évite les attaques personnelles. Je vous invite à éditer votre commentaire pour ne garder que les remarques sur Tailwind sans les remarques personnelles, merci.

[@kodaps_fr]

Le « tu es un dev back qui comprend rien » ça n’était pas utile voire ca nuit à la crédibilité du reste de l’argumentaire.

[@kodaps_fr]

Ceci étant je te rejoins sur la vacuité de son commentaire, que j’ai supprimé

[@MrJohAA]

@@kodaps_fr "Qui n'y comprends rien au front par rapport à la logique html "etc. Sors pas les choses de leur contexte.

[@MrJohAA]

@@kodaps_fr Je te laisse supprimer tes messages du coup, inutile de polluer le commentaire de cotigasenegal. Surtout que j'ai supprimé mes anciens 👍

[@MrgnUTube]

Honnêtement aucun, je préfère maitriser (et respecter) le CSS3 (SCSS).

[@338-p5e]

Salut, en fait Tailwind, c'est un mix entre Bootstrap et Saas/Scss ! Ben tu sais quoi: Je me passe de Bootstrap (parce qu'une class règle plusieurs points en même temps) et ceci, grâce au CSS et ne veux pas me passer du Scss. Donc, Tailwind (malgré que tout le monde y va...): ne m'intéresse pas.

[@leborgnecedric8090]

Tailwind ou Bootstrap, moi j'aime vraiment Bulma Bootstrap oui c'est la base, mais on ne veut que du CSS, j'ai laissé tombé depuis longtemps Tailwind oui c'est sympa, mais comme je suis dev back, je trouve ça trop long pour mettre en place ce que l'on veut Quand j'ai découvert Bulma, je l'ai adopté, il est full css, simple, très rapide et des composants facile à ajouter dans nos projets

[@tetuaoro]

Tailwind 0, bootstrap 0, picocss 10/10, merci pour cette vidéo et bonne fête

[@soso_D._SAX]

Moi j'aime bien bulma

[@herveelec]

le vrais css et scss restent la ref

[@privatkouadio5448]

quel Karisme

[@kodaps_fr]

merci ! ;)

[@Vin974]

Le titre énonce un versus de techno en 2023 alors que la vidéo date de 2021 ? Lol

[@manu5672]

C'est dingue. Il y a des gens qui sont dans l'avenir. Quel est l'état en 2023 alors qu'elle a été publié il y a 2 ans. Etre visionnaire c'est un boulot. Bootstrap 5 sera t'il pour 2021.... Grosse question quand on est dans l'avenir. A quand la vidéo sur le putaclick. Un peu gros quand même

[@MrJohAA]

Le but du web c'est justement de pouvoir revenir sur des choses et de les comprendre, de les maintenir et de les faire évoluer. Le côté gratifiant dans le web n'a, à mon sens pas vraiment sa place. Utiliser Tailwind c'est à mon sens se tirer une balle dans le pied. Le fait qu'il soit payant signifie qu'il cible une niche spécifique et qu'il se veut donc "précieux" ce qui n'est pas compatible avec la notion de partage qui existe dans la commu web. De plus il n'y a pas de composants réutilisables ce qui est totalement aberrant en 2023. La création de composant est la base des frameworks modernes (vue, angular, react etc.). Bref pas convaincu d'un tel framework surtout quand on est un connaisseur du Css et de Sass.