Tailwind est génial. Pourtant, j'arrête de l'utiliser.

MMaximilian Schwarzmüller
컴퓨터/소프트웨어창업/스타트업자격증/평생교육AI/미래기술

Transcript

00:00:00pour certains de mes nouveaux projets, d'ailleurs pour la plupart de ceux sur lesquels je travaille
00:00:05en ce moment, j'ai délaissé Tailwind. Je ne l'utilise plus du tout dans ces projets-là,
00:00:11ni shadcn, par conséquent. Et il y a une raison à cela. Ce n'est pas parce que Tailwind est mauvais,
00:00:18bien au contraire. C'est une bibliothèque incroyable. Je tiens à ce que ce soit très clair.
00:00:22Et je me sens presque mal de faire cette vidéo, cet épisode, parce qu'il y a
00:00:27à peine quelques semaines, je parlais des énormes problèmes financiers auxquels Tailwind faisait face.
00:00:32Depuis, heureusement, les choses se sont nettement améliorées. De nouveaux sponsors sont arrivés.
00:00:38Ils sont désormais dans une bien meilleure situation financière. Car évidemment, Tailwind est génial.
00:00:43Et il y a des gens qui travaillent avec énormément de cœur et d'énergie sur ce projet. Mon but n'est pas
00:00:49de dire que c'est mauvais, ou de convaincre qui que ce soit de ne pas l'utiliser. J'utilise juste cette chaîne
00:00:56pour partager mes réflexions, mes opinions et ma façon de travailler. Je me suis dit que ça pourrait
00:01:01vous intéresser. Alors pourquoi ne plus utiliser Tailwind si je le trouve génial ? Il faut prendre un peu
00:01:07de recul. Il y a quelques années, avant la révolution de l'IA, ou avant qu'elle soit si performante en code,
00:01:15j'utilisais Tailwind comme tout le monde, j'imagine. Principalement pour une raison
00:01:21majeure : cela me permettait d'itérer très rapidement sur le code. Je n'ai jamais vraiment utilisé Figma
00:01:28ou d'outils de ce genre. Aussi, bien sûr, parce que je travaille généralement seul.
00:01:34Et quand on travaille seul sur ses projets, ces outils de design ne sont pas indispensables. Pour moi,
00:01:40c'était toujours plus rapide d'itérer sur le design directement depuis le code. Je pouvais coder,
00:01:45et avec Tailwind, comme les classes sont en ligne dans le DOM ou le JSX, on peut
00:01:50rapidement mettre à jour le code, modifier les styles et tester différentes variantes. Ajuster une marge,
00:01:57c'était un flux de travail extrêmement efficace. C'était la raison principale pour moi, et peut-être aussi
00:02:04pour d'autres développeurs. Je sais que pour beaucoup d'autres, peut-être même la majorité,
00:02:10une autre raison forte est qu'ils détestent simplement le CSS. Le CSS n'est pas très populaire
00:02:17parmi les développeurs web. Et je comprends pourquoi. Ça peut paraître complexe, avec des centaines
00:02:23et des milliers de propriétés et de valeurs. Ça peut être intimidant. Cependant,
00:02:31le CSS moderne a énormément évolué. Beaucoup de choses sont plus simples qu'avant. Flexbox n'est
00:02:37plus nouveau du tout, mais il a facilité bien des aspects. Et pensez à Flexbox dans d'autres domaines
00:02:44où la gestion des couleurs est devenue bien plus aisée. On a maintenant les couleurs relatives en CSS.
00:02:51D'ailleurs, sur ma chaîne Academind, j'ai publié des vidéos où je parle des fonctionnalités
00:02:55récentes des navigateurs et du CSS, comme les couleurs relatives ou les “container queries”.
00:03:01Elles sont géniales pour créer des composants redimensionnables qui dépendent de l'espace disponible
00:03:08et non de la fenêtre d'affichage. Le CSS a fait du chemin. Le fait est qu'on peut utiliser tout cela
00:03:14avec Tailwind, ou presque, mais on peut aussi écrire du CSS pur (vanilla),
00:03:23ce qui est encore plus facile aujourd'hui grâce à l'IA. Même si vous n'aimez pas écrire du CSS,
00:03:28connaître certaines fonctionnalités et leur support par les navigateurs peut suffire. Vous pouvez orienter l'IA
00:03:34vers les fonctionnalités voulues, ajouter de la documentation ou des articles MDN, et l'IA
00:03:39écrira le code pour vous. On peut se demander : pourquoi faire ça ? Pourquoi ne pas juste utiliser Tailwind ?
00:03:45Après tout, il propose aussi ces fonctions modernes. J'y vois une raison et demie, du moins pour moi.
00:03:51La raison la moins importante, c'est que Tailwind ne supporte pas toujours les toutes dernières nouveautés,
00:03:58et surtout, l'IA ne connaît pas forcément toutes les fonctionnalités de Tailwind. Tailwind en a
00:04:05énormément, mais l'IA ne les utilise pas toutes. Elle utilise souvent les mêmes classes et parfois
00:04:13une ancienne syntaxe, ce qui vous fait passer à côté de certaines options. Certes, cela peut aussi
00:04:17arriver avec du CSS vanilla. Si vous ne dites pas à l'IA d'utiliser une fonction précise,
00:04:22elle ne le fera peut-être pas. Mais vous pouvez apprendre les quelques fonctions CSS essentielles
00:04:29et demander à l'IA de s'en servir. Je comprends l'argument : on peut faire la même chose avec Tailwind
00:04:34et lui demander d'utiliser des classes spécifiques. Il est peut-être juste plus simple de nommer
00:04:40quelques fonctions CSS clés plutôt que des classes Tailwind. Mais là n'est pas mon point principal.
00:04:48L'idée, c'est que j'ai toujours essayé de réduire le nombre de bibliothèques dans mes projets,
00:04:53et ce pour deux raisons. Premièrement, je crée du contenu éducatif, donc j'ai l'habitude
00:05:01de voir les bibliothèques externes comme un inconvénient. Si je crée un cours sur React,
00:05:07et que j'y utilise aussi Tailwind, s'il y a un changement majeur (breaking change) dans Tailwind,
00:05:12une grande partie de mon code ou de mon cours devient obsolète, et je reçois plein de questions
00:05:17d'étudiants, même si le sujet principal, React, n'a pas bougé. C'est un problème très spécifique
00:05:23qui me concerne, mais qui ne touche pas la plupart des sites. Cela dit, même pour un site classique,
00:05:29avoir le moins de bibliothèques tierces possible est, selon moi, une bonne pratique.
00:05:38Je ne dis pas qu'il faut absolument bannir toutes les bibliothèques. Il y a d'excellentes raisons
00:05:44d'en utiliser certaines. Par exemple, pour un site avec un éditeur de texte enrichi,
00:05:50utiliser quelque chose comme Tiptap est tout à fait logique, car créer son propre éditeur est complexe.
00:05:54Avec l'IA, c'est certes plus facile jusqu'à un certain point, mais vous rencontrerez
00:05:59beaucoup de cas particuliers que vous devrez résoudre vous-même. L'IA aide, mais elle
00:06:06ne réussit pas tout du premier coup. Vous le savez si vous l'avez déjà utilisée. Donc,
00:06:11il y a des raisons d'utiliser des bibliothèques tierces. Je dis simplement que le styling,
00:06:16comme je l'ai expliqué, est quelque chose de remplaçable. Encore une fois, ce n'est pas pour tout le monde,
00:06:21mais pour moi, ça fonctionne bien. C'est donc une bibliothèque dont je peux me passer parce que
00:06:28ça ne me dérange pas de relire le code CSS généré par l'IA et de corriger les problèmes de style
00:06:37en CSS pur quand ça ne va pas. Car évidemment, il y aura des ratés avec l'IA.
00:06:44Mais ça me va. Si vous détestez viscéralement regarder du code CSS, ce ne sera pas une option
00:06:50pour vous, c'est évident. Mais de mon côté, je peux ainsi me passer de Tailwind. Je peux aussi
00:06:56me passer de shadcn, par exemple, parce que je construis mes propres composants. Et shadcn,
00:07:00bien que ce ne soit pas une bibliothèque traditionnelle, utilise Radix UI en coulisses,
00:07:08une bibliothèque dont la maintenance est actuellement discutable, d'après ce que je sais. Et là on touche
00:07:16au vrai problème : pourquoi je veux éviter les bibliothèques, au-delà du contenu éducatif.
00:07:21Chaque bibliothèque ajoutée peut devenir un fardeau si elle n'est plus maintenue. À ce moment-là,
00:07:29les failles de sécurité ne sont plus corrigées. Les bugs persistent. Des bugs d'affichage,
00:07:35par exemple, avec Tailwind. Les nouvelles fonctions ne sont plus ajoutées. S'il y a une nouvelle option CSS
00:07:41et que Tailwind n'était plus maintenu — ce qui n'est pas le cas, mais si ça l'était —
00:07:46vous ne pourriez jamais l'utiliser. Et on est passés assez près avec Tailwind.
00:07:52Dans la vidéo où je parlais de leurs soucis, je citais un post du créateur principal de Tailwind
00:07:58disant que s'ils ne réglaient pas ce problème de financement, le projet pourrait être abandonné.
00:08:03C'était peut-être un peu drastique, ou fait pour attirer l'attention. Mais quoi qu'il en soit,
00:08:11le risque avec la plupart des bibliothèques tierces, c'est l'arrêt de leur maintenance future,
00:08:17selon qui travaille dessus. C'est pourquoi j'aime revenir au CSS vanilla. Et c'est important,
00:08:22car j'en ai toujours fait. Je le répète : je souhaite le meilleur à Tailwind et je l'utilise
00:08:28encore dans de nombreux projets. Ce n'est pas comme si je le détestais. C'est juste une
00:08:35expérimentation que je mène sur certains projets. Et que ce soit pour Tailwind ou pour
00:08:41tout autre outil, je vous conseillerais — et c'était déjà vrai avant l'IA — de toujours y réfléchir
00:08:46à deux fois avant d'ajouter une bibliothèque. Il y a souvent d'excellentes raisons de le faire.
00:08:53Par exemple, Better Auth pour l'authentification est génial. Je l'utiliserais sans hésiter. Mais si
00:08:57une bibliothèque peut être remplacée, cela mérite peut-être qu'on s'y attarde un peu plus.
00:09:04it might be worth a second look or thought, I guess.

Key Takeaway

L'auteur délaisse Tailwind au profit du CSS vanilla car l'IA simplifie désormais l'écriture de styles modernes tout en réduisant la dépendance critique envers des bibliothèques tierces dont la maintenance peut devenir incertaine.

Highlights

L'IA change la donne en facilitant l'écriture de CSS vanilla moderne

Timeline

Introduction et clarification de la position

L'auteur annonce qu'il n'utilise plus Tailwind ni shadcn pour ses nouveaux projets personnels et professionnels. Il souligne immédiatement que ce choix n'est pas dû à une baisse de qualité de Tailwind, qu'il considère toujours comme une bibliothèque incroyable. Il évoque brièvement les anciens problèmes financiers de Tailwind, désormais résolus grâce à de nouveaux sponsors, pour ne pas nuire à l'image du projet. Cette section sert à clarifier son intention : partager une réflexion personnelle sur sa méthode de travail plutôt que de critiquer l'outil. Il exprime son respect pour les développeurs derrière Tailwind tout en introduisant son changement de cap.

L'atout historique de Tailwind : l'itération rapide

Avant l'essor de l'IA, l'avantage majeur de Tailwind était la vitesse fulgurante d'itération sur le design directement dans le code. Travaillant souvent seul, l'auteur explique qu'il préférait se passer d'outils comme Figma pour ajuster ses styles via les classes en ligne dans le JSX. Cette approche permettait de tester instantanément des variantes de marges ou de couleurs sans changer de fichier. Tailwind répondait ainsi parfaitement au besoin de productivité pour les développeurs travaillant en solo. L'auteur reconnaît que c'est cette efficacité qui a fait le succès de l'outil auprès de la communauté.

Le renouveau du CSS moderne et l'impact de l'IA

Cette section explore pourquoi le CSS vanilla est redevenu attractif grâce aux évolutions techniques récentes comme les "container queries" et les couleurs relatives. L'auteur admet que le CSS peut être intimidant, mais précise que l'IA peut désormais écrire du code complexe à la place du développeur. En fournissant une documentation MDN à une IA, on peut obtenir des styles modernes sans avoir à mémoriser chaque propriété. Il mentionne également ses propres tutoriels sur Academind pour illustrer la puissance actuelle des navigateurs. Le CSS n'est plus le fardeau qu'il était autrefois pour ceux qui n'aiment pas l'écrire manuellement.

Les limites de Tailwind face à l'IA

L'auteur explique que l'IA ne maîtrise pas toujours l'immense catalogue de classes de Tailwind et utilise souvent des syntaxes datées. Il est parfois plus simple de demander à l'IA d'utiliser une fonction CSS spécifique que de chercher la classe Tailwind correspondante. Même si Tailwind supporte les fonctions modernes, le passage par une couche d'abstraction supplémentaire peut créer des frictions inutiles lors de l'utilisation de modèles de langage. L'idée est qu'il est souvent plus direct de nommer des fonctions natives. Cette réflexion pousse l'auteur à privilégier la source originale du style : le CSS pur.

Le risque des bibliothèques tierces et la maintenance

L'un des arguments principaux est la volonté de réduire le nombre de dépendances pour éviter les problèmes de maintenance à long terme. Pour un éducateur, un changement majeur dans une bibliothèque comme Tailwind peut rendre tout un cours vidéo obsolète, générant frustration et support supplémentaire. L'auteur cite l'exemple de Tiptap pour illustrer qu'il accepte les bibliothèques quand la complexité technique est trop élevée pour être gérée seul. Cependant, il estime que le styling est un domaine où l'on peut facilement se passer d'outils externes. Il préfère garder la main sur son code CSS pour garantir la pérennité de ses projets et de son contenu.

Pérennité du code et conclusion

L'auteur aborde les risques de sécurité et les bugs qui persistent lorsque des bibliothèques comme Radix UI ou Tailwind cessent d'être activement maintenues. Il rappelle que Tailwind a frôlé l'abandon par le passé en raison de soucis de financement, ce qui souligne la fragilité des outils tiers. Bien qu'il continue d'utiliser Tailwind sur d'anciens projets, il encourage une réflexion critique avant d'ajouter n'importe quelle dépendance. Il conclut en suggérant que si une bibliothèque peut être remplacée par du code natif sans perte majeure de productivité, cela en vaut la peine. Son message final est un appel à la prudence et à l'évaluation systématique du rapport bénéfice/risque des outils externes.

Community Posts

View all posts