Retour • 03/10/2024

Pourquoi TailwindCSS a gagné ?

Écris par Melvyn Malherbe le 03/10/2024

Pourquoi et comment TailwindCSS a gagné et comment il est devenu le framework CSS le plus utilisé et aimé par les développeurs ?

Si tu souhaites savoir pourquoi utiliser Tailwind et encore mieux... savoir si TailwindCSS a vraiment gagné ? Tu es à l'endroit parfait pour le comprendre.

Tailwind a-t-il gagné ?

Réponse courte : oui.

Mais comment je peux dire ça ? Il y a plusieurs paramètres qui nous permettent de savoir si actuellement, Tailwind a gagné.

1. stateofcss.com

La meilleure réponse c'est le StateOfCSS de 2023 et plus précisément le ratio entre la vision positive et négative des utilisateurs. On peut voir que Tailwind est de très loin le plus apprécié par la communauté :

Tailwind est le plus apprécié par la communauté en 2023

2. Google Trends

Même si Bootstrap reste le framework CSS le plus recherché et utilisé dans le monde (principalement car c'est le plus vieux) on peut voir une tendance très nette comme quoi :

• la recherche sur bootstrap baisse (moins de personnes qui cherchent "Bootstrap" sur Google)
• la recherche sur tailwind augmente (plus de personnes qui cherchent "Tailwind" sur Google)

Tailwind a une tendance qui monte contrairement à Bootstrap

3. Les vidéos YouTube

Alors c'est difficile à prouver mais on peut voir que les plus gros créateurs qui font du développement web comme Theo, Josh ou autre utilisent et parlent de Tailwind.

Tailwind est utilisé dans énormément de contenus sur YouTube

4. NPM Trends

Même si je sais que Bootstrap est énormément téléchargé via CDN et pas par NPM, il est quand même impressionnant de voir l'évolution de Tailwind sur NPM dans les deux dernières années.

Tailwind est de plus en plus utilisé sur NPM et ça va très vite

Certes c'est pas une donnée fiable à cause de l'usage massif de Bootstrap comme CDN, mais concernant des librairies comme styled-components, on peut dire qu'ici c'est très fiable.

On a énormément d'usage de Tailwind sur NPM, bien plus que les concurrents.

Peut-on dire que Tailwind a gagné ?

Oui, Tailwind a gagné. En tout cas en 2023 et 2024, il est largement plus populaire. La popularité de Tailwind crée un effet boule de neige qui fait qu'il y a plus de contenus sur YouTube, sur Twitter etc... et qui augmente encore sa popularité.

Malgré tout, il faut être réaliste et assumer que Bootstrap est toujours plus utilisé à l'heure actuelle que Tailwind, mais avec cette tendance je pense que ça va changer.

Pourquoi Tailwind a gagné ?

Quelles sont les raisons qui ont fait que Tailwind a gagné et pourquoi sa tendance ne fait que s'accélérer et je pense pas que ça va changer.

1. Pas de changement de contexte

On est capable de maintenant de réaliser les styles au plus proche de notre application. Pas besoin de changer de contexte entre un fichier CSS et un fichier JS. Certes des outils comme styled-components permettent aussi de faire ça avec la prop css.

2. Tailwind marche vite et bien (et fonctionne avec le SSR)

Tailwind est simple à installer, il n'y a presque rien à faire. Il est possible de l'installer en 1 minute et de pouvoir l'utiliser ensuite.

C'est magique à quel point c'est efficace, une fois fait, le build et la publication de l'application est tout aussi simple et rapide !

Je me rappelle quand j'essayais d'utiliser mui dans une application NextJS et qu'il fallait faire un bachelor pour être capable de build et deploy l'application sans problème.

Finalement, avec la mode des server components, on souhaite avoir des outils qui s'intègrent 100% avec ce nouveau paradigme server-side, et Tailwind le fait encore une fois simplement.

3. Copier / coller

Un des ingrédients de l'explosion de Tailwind est sa capacité à pouvoir être copié collé. Il y a deux raisons pour lesquelles on peut le copier coller :

1. Le HTML et le CSS sont au même endroit
2. Il a une syntaxe "normalisée" et tout le monde utilise la même avec souvent la même configuration

Grâce à ça, il y a des centaines d'outils qui contiennent des composants à copier coller. Ce concept a même inspiré Shadcn/UI à créer une librairie de composants entièrement en mode "copier / coller".

Ceci participe énormément à sa boucle de viralité car :

• toi aussi tu veux ajouter ces composants dans ton code
• pour le faire tu es obligé d'installer Tailwind
• tu finis par aimer Tailwind et tu le repartages

4. Aucune dépendance et optimisé

Un point important de Tailwind c'est qu'il est super performant. Il ne ralentit que très peu le temps de build et il n'a pas besoin de dépendances.

Il est donc "facile" de l'installer sans avoir peur d'augmenter les dépendances de ton projet.

5. Tailwind permet de faire de meilleures interfaces

J'explique qu'il fallait être bon en design en tant que développeur web et bah justement, Tailwind nous permet d'être meilleur.

Il vient avec de nombreux défauts :

• shadow
• size
• couleur
• etc...

Ces défauts nous permettent d'ajouter une cohérence dans nos applications qui les rendent automatiquement plus belles et agréables à utiliser.

En plus le fondateur de Tailwind a créé TailwindUI et RefactorUI qui nous donnent encore plus envie d'utiliser Tailwind et qui nous expliquent comment le faire.

Conclusion

Avec tous ces avantages, Tailwind s'est imposé comme un leader. Comme tout leader (ex: React / Apple etc...), il divise énormément. Pour dire, quand je dis que j'adore Tailwind dans certaines vidéos YouTube certaines personnes m'écrivent un article entier pour me dire que c'est mal.

Bref, le plus important c'est de l'utiliser si tu en as envie et que tu penses que ça peut être bénéfique pour toi.

Si tu es intéressé à te former à Tailwind de la bonne manière tu peux te rendre ici :

Si tu veux aller plus loins tu peux aller voir mon article sur Tailwind ou CSS à apprendre en premier ? ou même mon guide sur FlexBox CSS car il faut mieux maîtriser Flexbox pour devenir un développeur web.