TECHNOLOGIES

Tailwind CSS, notre framework de styles de référence

Tailwind CSS est un framework CSS utility-first open source créé par Adam Wathan (Tailwind Labs). Il permet de construire des interfaces modernes directement dans le HTML, sans quitter son éditeur et sans écrire de CSS custom.

Sa philosophie — composer des styles à partir de classes atomiques plutôt que de surcharger des composants pré-stylés — en fait le choix idéal pour des interfaces métier riches, cohérentes et performantes.

Tailwind CSS

POURQUOI TAILWIND CSS

Les avantages qui font la différence

Un framework CSS ne se choisit pas sur sa popularité. Voici pourquoi Tailwind CSS s'est imposé dans tous nos projets Vue.js depuis plusieurs années.

Productivité dès le premier sprint

Les classes utilitaires permettent de styler une interface directement dans le HTML sans changer de fichier. Sur un prototype ou une nouvelle fonctionnalité, le gain de temps est immédiat — idéal pour nos phases de prototype.

Zéro CSS mort en production

Le moteur de Tailwind analyse votre code source et n'inclut que les classes réellement utilisées. Résultat : un fichier CSS de quelques kilooctets, même sur un projet de grande taille.

Design system cohérent par défaut

Palette de couleurs, typographie, espacements, breakpoints — tout est normalisé via la configuration. Chaque développeur produit du code visuellement cohérent sans effort supplémentaire.

Intégration native avec Vue.js

Tailwind CSS et Vue.js fonctionnent naturellement ensemble : les classes utilitaires s'appliquent directement dans les templates des composants Vue, avec un binding dynamique sur les états et variantes.

Communauté internationale active

Créé par Adam Wathan, Tailwind CSS est soutenu par Tailwind Labs et une communauté de plusieurs millions de développeurs. La documentation est un modèle du genre : complète, interactive et maintenue à jour.

Migration progressive sans réécriture

Tailwind peut coexister avec un CSS existant. Le builder ne charge que les classes effectivement utilisées, ce qui permet d'intégrer Tailwind progressivement dans un projet existant sans tout réécrire.

HISTORIQUE

Versions majeures de Tailwind CSS

Tailwind publie des versions majeures avec des breaking changes clairement documentés. Un codemod officiel est disponible pour automatiser les migrations. Guide de migration officiel →

  • Tailwind CSS 4

    Recommandée

    Jan. 2025

    La version active pour tout nouveau projet. Moteur de build entièrement réécrit en Rust (via Lightning CSS). Configuration déplacée dans le CSS — plus de tailwind.config.js.

    Nouveautés

    • Nouveau moteur Oxide — Build jusqu'à 10× plus rapide grâce au moteur écrit en Rust. HMR quasi-instantané en développement.
    • CSS-first configuration — La configuration se fait directement dans le fichier CSS via @theme, sans fichier JS séparé.
    • Variables CSS natives — Chaque token du design system est exposé comme variable CSS custom property utilisable partout.
    • Détection automatique des sources — Plus besoin de déclarer les chemins content[] — Tailwind détecte automatiquement les fichiers à analyser.
    • Nouvelle palette de couleurs — Palette étendue avec de meilleures nuances perceptuelles. Les noms de couleurs sont compatibles avec la v3 moyennant un alias.

    Breaking changes

    • Suppression de tailwind.config.js — La configuration JS est remplacée par @theme dans le CSS. Un codemod est disponible pour migrer automatiquement.
    • Classes utilitaires renommées — shadow → shadow-sm, shadow-md → shadow, ring → ring-3, blur → blur-sm. Utilitaires obsolètes supprimés.
    • Suppression des variantes arbitraires de stack — Les classes arbitraires comme [&>*]:... sont remplacées par la notation (**:...).
    • Hover sur mobile — hover: n'est plus appliqué sur les appareils tactiles par défaut. Aligne le comportement avec les specs CSS.

  • Tailwind CSS 3

    Support actif

    Déc. 2021

    Version la plus répandue en production. Configuration via tailwind.config.js, moteur JIT activé par défaut. Maintenance de sécurité assurée — migration vers la v4 recommandée pour les nouveaux projets.

    Nouveautés

    • JIT par défaut — Le compilateur Just-in-Time génère les classes à la demande — fin de la purge manuelle, support de toutes les variantes sans configuration.
    • Valeurs arbitraires — Syntaxe w-[347px], text-[#1a2b3c] pour utiliser n'importe quelle valeur hors design system sans écrire de CSS custom.
    • Variante RTL et print — Support natif du mode right-to-left et des styles d'impression via rtl: et print:.
    • Peer et group améliorés — group/{name} et peer/{name} pour imbriquer des comportements conditionnels entre éléments frères ou parents.

    Breaking changes

    • Suppression de @apply avec des variantes — @apply hover:text-black n'est plus supporté — utiliser les variantes directement dans le HTML ou déclarer un composant CSS.
    • Suppression de la purge manuelle — La clé purge est remplacée par content[]. Les anciens fichiers de configuration doivent être mis à jour.

  • Tailwind CSS 2

    Obsolète

    Nov. 2020

    Introduction du mode JIT en option et du dark mode. Fin de vie officielle depuis la sortie de la v3. Présent sur des projets legacy — migration recommandée.

    Nouveautés

    • Dark mode — Classe dark: pour adapter les couleurs selon le mode système ou une classe parente — sans JavaScript.
    • Palette étendue — 700+ couleurs vs 90 en v1. Ring utilities pour les outlines focus.
    • Mode JIT (opt-in) — Pré-version du compilateur JIT, stabilisé et activé par défaut en v3.

    Breaking changes

    • Renommage de classes — shadow-outline → ring, shadow-xs → shadow-sm. Classes flex implicites supprimées.
    • Suppression de IE11 — IE11 n'est plus supporté — CSS custom properties utilisées en interne.

  • Tailwind CSS 1

    Obsolète

    Nov. 2019

    Première version stable. Approche utility-first sans JIT — fichier CSS généré de plusieurs Mo, purge CSS obligatoire en production.

    Nouveautés

    • Utility-first — Le concept fondateur : des classes atomiques couvrant l'ensemble des propriétés CSS, sans écrire une ligne de CSS custom.
    • Responsive design intégré — Préfixes sm:, md:, lg:, xl: pour adapter le style selon la taille d'écran, directement dans le HTML.

COMPARATIF

Tailwind CSS face à Bootstrap et Bulma

Bootstrap et Bulma ont posé les bases du développement CSS structuré. Tailwind CSS part d'une philosophie différente — voici pourquoi ce changement de paradigme nous a convaincus.

Critère Tailwind CSS Bootstrap Bulma
Paradigme Utility-firstComponent-basedComponent-based
Approche Classes atomiques dans le HTMLComposants pré-stylés + classes utilitairesComposants CSS purs (sans JS)
Personnalisation Totale via configurationVia variables SassVia variables Sass
Poids en production < 10 Ko (JIT)> 200 Ko (full bundle)~200 Ko (full bundle)
Composants natifs Aucun composant natif — librairies tiercesComposants natifs (modal, dropdown, navbar…)Composants CSS uniquement (JS à apporter soi-même)
Courbe d'apprentissage Moyenne (nouvelle façon de penser le CSS)Faible (familier pour la plupart des développeurs)Faible à moyenne

LIBRAIRIES DE COMPOSANTS

Des composants prêts à l'emploi, stylés avec Tailwind

Un composant UI regroupe la structure HTML, le comportement JavaScript et les styles en un seul bloc réutilisable. Couplés à Vue.js — où chaque composant est une unité autonome — ils permettent de construire des interfaces riches sans repartir de zéro à chaque projet. Voici les librairies que nous recommandons et utilisons.

Librairie Éditeur Description Support Vue.js Open source Lien
Headless UI Tailwind Labs Composants accessibles et non stylés, conçus pour être utilisés avec Tailwind CSS. Gère la logique (focus trap, aria, keyboard nav) sans imposer de style — vous appliquez vos classes Tailwind librement. Oui Open source Voir →
PrimeVue PrimeTek Librairie riche de composants Vue (80+) avec un thème Tailwind officiel via Tailwind Passthrough. Tables, calendriers, charts, éditeurs — tout est disponible sans écrire le composant from scratch. Natif Vue 3 Open source Voir →
Nuxt UI NuxtLabs / Vercel Librairie de composants Vue basée sur Tailwind CSS et Reka UI (fork de Radix). Depuis le rachat de NuxtLabs par Vercel en 2025, Nuxt UI bénéficie de ressources importantes et reste open source — un choix de qualité pour les projets Vue.js modernes. Vue 3 + Nuxt 3 Open source Voir →

Nos bonnes pratiques

Comment nous utilisons Tailwind CSS en production

Tailwind CSS donne une grande liberté — ce qui peut vite devenir du chaos sans conventions.

Voici les pratiques que nous appliquons sur chaque projet pour garder un code lisible, cohérent et maintenable dans le temps.

Variables et tokens de configuration pour un code lisible

  • Design tokens centralisés — Plutôt que de répéter text-[#1f356f] dans tout le code, nous définissons les couleurs, espacements et typographies dans la configuration Tailwind. Un token primary-900 est compréhensible par toute l'équipe — et modifiable en un seul endroit.
  • Classes sémantiques via @apply — Pour les patterns qui se répètent (bouton principal, carte article, badge statut), nous extrayons une classe CSS nommée avec @apply. Le template reste lisible et le style reste piloté par Tailwind.
  • Moins de copier-coller, plus de cohérence — Une modification sur la classe .btn-primary se répercute partout. Sans cette discipline, chaque développeur copie-colle des dizaines de classes et les divergences s'accumulent sprint après sprint.

Composants Vue.js dédiés pour uniformiser l'interface

  • Composants UI internes — Un <AppButton>, un <AppCard>, un <AppBadge> — des composants Vue qui encapsulent les classes Tailwind et exposent des props pour les variantes. Toute l'équipe utilise les mêmes blocs, l'interface est cohérente par construction.
  • Gestion centralisée des comportements — Le hover, le focus, les états disabled ou loading sont définis une seule fois dans le composant. Plus de divergences entre les pages — moins de bugs d'interface.
  • Évolutivité maîtrisée — Ajouter une variante (size, color, outline) se fait dans le composant sans toucher aux pages qui l'utilisent. Le refactoring est local et sans régression.

Migration progressive grâce au builder intelligent

  • Cohabitation avec un CSS existant — Tailwind peut être ajouté à un projet qui utilise déjà Bootstrap ou du CSS custom. Le builder n'inclut que les classes effectivement utilisées — aucun conflit de sélecteurs, aucun poids supplémentaire inutile.
  • Intégration composant par composant — Nous migrons d'abord les nouveaux composants vers Tailwind, puis les anciens au fur et à mesure des évolutions. Pas de réécriture à risque — chaque sprint laisse le projet dans un état stable et déployable.
  • Suppression du CSS legacy en confiance — Le PurgeCSS intégré signale ce qui n'est plus utilisé. Supprimer un ancien fichier CSS est une décision éclairée, pas un saut dans le vide.

FAQ

Les réponses à vos questions

Et si vous ne trouvez pas ce que vous cherchez, nous serons ravis de vous répondre en direct lors d'un rendez-vous entre humains !

Oui, tout à fait. Nous reprenons régulièrement des projets existants qui utilisent Bootstrap, Bulma, du CSS custom ou tout autre approche. Notre rôle est de comprendre l'existant, de le stabiliser et de proposer une évolution cohérente — ce qui peut inclure une migration progressive vers Tailwind, ou simplement maintenir et faire évoluer le CSS en place si c'est la meilleure décision pour le projet.

Non. Tailwind CSS ne contraint pas le design — il fournit des outils pour le mettre en œuvre. La configuration permet de définir n'importe quelle palette de couleurs, typographie, espacement ou breakpoint. Les valeurs arbitraires (w-[347px], text-[#1a2b3c]...) permettent de sortir du design system quand c'est nécessaire. En pratique, Tailwind est plus expressif que du CSS custom non structuré : il encourage la cohérence sans l'imposer.

En production, oui dans la grande majorité des cas. Le moteur JIT de Tailwind ne génère que les classes effectivement utilisées dans le code — le fichier CSS final fait souvent moins de 10 Ko, compressé. Du CSS écrit manuellement sur plusieurs années accumule du code mort, des règles en doublon et des surcharges successives qui alourdissent le bundle. Tailwind impose une discipline qui produit mécaniquement un CSS léger et sans redondance.

Pour un besoin de design très pointu, une interface avec des contraintes de performance extrêmes ou une équipe disposant d'une expertise CSS avancée, écrire du CSS sur-mesure peut effectivement avoir du sens. Mais dans la grande majorité des projets métier, utiliser un framework comme Tailwind CSS — une fois maîtrisé — permet de gagner significativement en productivité, de maintenir un code cohérent entre développeurs et de bénéficier des améliorations apportées quotidiennement par une communauté de plusieurs millions de contributeurs. L'argument 'je préfère tout faire à la main' mérite d'être challengé : la vraie question est de savoir si le temps investi à réinventer des solutions existantes génère une valeur que ne pourrait pas apporter un framework éprouvé.

« En alliant les compétences variées de notre équipe (UI, 3D, connaissance du secteur du bâtiment) et l'expertise de SmartBooster, nous sommes capables répondre à des projets ambitieux nécessitant une interface utilisateur riche et claire, associée à des règles de fonctionnement complexes.

Le tout à des coûts tout à fait compétitifs. »

Florent Buffin
Florent Buffin
Directeur des opérations chez PIA PRODUCTION

« La première version de notre logiciel de gestion de chantier de rénovation énergétique à été disponible en 6 semaines et à été suivi de plusieurs mises à jour par semaine pour arriver à la solution complète que nous avons aujourd'hui. »

Julien Beauchamp
Julien Beauchamp
Franchisé PPF Énergie
Voir la réalisation →

Pour aller plus loin

Approfondir votre réflexion

Vue.js

Tailwind CSS et Vue.js fonctionnent de pair sur nos projets. Découvrez pourquoi Vue.js est notre framework JavaScript de référence.

Prototype et MVP logiciel

La maîtrise de Tailwind nous permet de construire des interfaces soignées dès le premier sprint, sans sacrifier la vitesse de livraison.

Symfony

Symfony côté back, Tailwind côté front — une stack maîtrisée qui garantit cohérence et maintenabilité sur vos projets métier.

Vous avez un projet ?

Contactez-nous pour savoir comment nous pouvons vous aider.

Contactez-nous