L'essentiel · 30 secondes de lecture
Tailwind CSS est gratuit et open source (licence MIT). Version 4.3 en novembre 2026. Tailwind Plus, le catalogue payant de composants et de modèles, est facultatif.
- Gratuit et open source sous licence MIT, y compris pour les projets commerciaux.
- La version 4 déplace la configuration dans le CSS : les jetons de design vivent dans un bloc @theme, en variables CSS.
- Tailwind Plus (ex-Tailwind UI) est une bibliothèque payante et facultative de composants et de modèles.
- Notre avis : la façon la plus productive de mettre en forme un site sur mesure en 2026, si l'équipe s'accorde sur un design system.
Résumer cette page avec l'IA
Tailwind CSS met en forme chaque page de notre propre site. En reconstruisant bebranded.xyz sur Next.js en novembre 2026, nous avons écrit notre design system en Tailwind CSS 4 : couleurs, polices et tailles en jetons, titres et styles de texte en utilitaires partagés. Cette fiche explique ce qu'est Tailwind, s'il est gratuit, ce qu'apporte Tailwind Plus et quand une autre approche est plus pertinente.
01C'est quoi Tailwind CSS ?
Tailwind CSS est un framework CSS open source, publié sous licence MIT par Tailwind Labs. Il est « utility-first » : au lieu d'écrire une feuille de style avec ses propres noms de classes, on assemble directement dans le HTML de petites classes à usage unique, comme flex, pt-4 ou text-center. Au moment du build, Tailwind parcourt les fichiers et ne génère que le CSS utilisé.
La version en cours en novembre 2026 est la 4.3. La version 4 a changé la configuration : le thème vit désormais dans le fichier CSS, dans un bloc @theme de variables CSS, et non plus dans un fichier de configuration JavaScript.
02Notre usage de Tailwind CSS chez BeBranded
Notre site utilise Tailwind CSS 4 dans une application Next.js. C'est l'organisation qui le rend maintenable :
- Des jetons dans
@theme. Couleurs de la marque, familles de polices (une pour les titres, une pour le texte) et tailles sont déclarées une seule fois en variables CSS, puis utilisées partout via les classes Tailwind. - Des utilitaires de design system. Les styles de titres et de texte sont des utilitaires déclarés avec
@utility: un titre a le même rendu sur toutes les pages et se modifie à un seul endroit. - Des composants, pas du copier-coller. Les blocs répétés (cartes, sections, lignes d'appel à l'action) sont des composants React : chaque liste de classes n'existe qu'une fois.
- Une seule référence avec Figma. Les jetons reprennent notre design system dans Figma, ce qui garde design et code alignés.
C'est aussi notre façon de construire pour nos clients, dans nos offres création de site, applications web et design system. Tailwind est enfin ce que génèrent par défaut des outils d'IA comme v0 ou Claude Code : relire du code généré est plus simple quand le projet suit déjà les conventions Tailwind.
03Fonctionnalités clés
- Classes utilitaires pour la mise en page, l'espacement, la typographie, les couleurs, les bordures, les effets et les animations.
- Variantes responsive et d'état : préfixez n'importe quel utilitaire par
md:,hover:,dark:oufocus:. - Configuration en CSS avec les jetons
@themeet@utilitypour ses propres utilitaires (v4). - CSS de production léger : seules les classes utilisées sont générées.
- CSS moderne : container queries, cascade layers, couleurs P3, propriétés logiques.
- Indépendant du framework : React, Next.js, Vue, Svelte, Astro ou HTML simple.
- Un écosystème large : extensions officielles, extension pour l'éditeur, bibliothèques de composants comme shadcn/ui.
04Prix de Tailwind CSS en 2026
Licence et version vérifiées sur tailwindcss.com et sur le dépôt GitHub officiel le 14 novembre 2026. Ce jour-là, la page Tailwind Plus renvoyait vers un écran de connexion : nous n'avons pas pu lire son prix.
| Produit | Prix | |
|---|---|---|
| Tailwind CSS | Gratuit (licence MIT) | Ce qui est inclus Le framework complet, pour un usage personnel et commercial |
| Tailwind Plus | Payant (prix non lisible le 14 novembre 2026) | Ce qui est inclus Blocs d'interface et modèles de sites prêts à l'emploi, par Tailwind Labs |
| Bibliothèques communautaires (shadcn/ui et autres) | Gratuites pour la plupart | Ce qui est inclus Composants open source mis en forme avec Tailwind |
Tailwind CSS est-il gratuit ? Oui, entièrement. Vous n'avez jamais besoin de payer pour utiliser Tailwind CSS, même pour des sites et applications commerciaux. Tailwind Plus est un raccourci pour les équipes qui veulent partir de composants dessinés par des professionnels ; il reste facultatif.
05Avantages et inconvénients
Avantages
- Gratuit et open source, avec une très grande communauté.
- Rapide à utiliser : pas d'allers-retours entre HTML et feuille de style, pas de débat sur les noms de classes.
- Les jetons et utilitaires imposent la cohérence dans une équipe.
- Un CSS de production léger, sans styles morts qui s'accumulent.
- Le format par défaut de la plupart des outils de code par IA : le code généré s'intègre directement.
Inconvénients
- Les longues listes de classes nuisent à la lisibilité sans composants ni utilitaires partagés.
- Une courbe d'apprentissage : il faut bien connaître le CSS pour bien utiliser Tailwind.
- Sans design system, chaque développeur invente ses espacements et ses couleurs.
- Le marketing ne peut pas modifier les styles visuellement ; tout passe par un développeur.
06Notre verdict
Pour qui
- Les développeurs qui construisent des sites sur mesure, des SaaS et des applications web.
- Les équipes qui maintiennent un design system dans le code.
- Les projets React et Next.js, surtout s'ils utilisent la génération de code par IA.
- Les agences qui veulent un style cohérent d'un projet client à l'autre.
Pour qui pas
- Les équipes qui veulent concevoir leurs pages visuellement, sans code : Webflow ou Framer conviennent mieux.
- Les projets qui doivent avoir un rendu prêt en un après-midi, où un kit comme Bootstrap va plus vite.
- Les bases de code déjà standardisées sur une autre approche du style, où mélanger les deux sème la confusion.
07Alternatives à Tailwind CSS
| Outil | Idéal pour | |
|---|---|---|
| Tailwind CSS | Designs sur mesure et design systems | Approche Classes utilitaires, gratuit |
| Bootstrap | Interfaces rapides et classiques | Approche Composants prêts à l'emploi, gratuit |
| CSS Modules ou CSS classique | Équipes qui préfèrent les feuilles de style | Approche CSS personnalisé et cloisonné |
| Webflow | Design visuel sans code | Approche Éditeur no-code qui écrit le CSS |
| Relume | Wireframes et sections de site rapides | Approche Bibliothèque de composants pour Figma et Webflow |
Notre règle : Tailwind pour tout projet codé doté d'un vrai design system ; du CSS classique quand l'équipe le préfère et que le projet est petit ; un outil visuel comme Webflow quand des non-développeurs doivent maîtriser le design. Notre article sur les sites sur mesure qui ne freinent pas les évolutions explique pourquoi la structure compte plus que l'outil.
08Tailwind et le code généré par IA
v0, Lovable ou Claude Code écrivent des classes Tailwind par défaut. C'est pratique, mais le code généré a tendance à figer couleurs et tailles en dur. Déclarer ses jetons dans @theme et demander à l'IA de s'en servir garde les écrans générés fidèles à la marque. Notre guide pour créer un site avec l'IA détaille cette méthode.
