Qu'est-ce que Tailwind CSS ? Guide simple pour créateurs d'applications

Tailwind CSS est une boîte à outils pour mettre en forme les sites web. Au lieu d'écrire des règles de style séparées dans leur propre fichier, vous donnez à chaque élément de courts noms de classes prêts à l'emploi — bg-white pour un fond blanc, p-4 pour le rembourrage, text-lg pour un texte plus grand, rounded-xl pour des coins arrondis — et Tailwind produit le CSS dont le navigateur a besoin. Il est gratuit, open source, et l'une des façons les plus courantes de mettre en forme les applications web modernes.

Pourquoi Tailwind compte quand on crée avec l'IA

Si vous créez une application web avec un outil de création par IA, il y a de bonnes chances qu'elle soit mise en forme avec Tailwind. Mythex, par exemple, démarre les nouveaux projets sur Vite + React + TypeScript + Tailwind, sauf si vous demandez autre chose (comment la technologie est choisie).

Cela vous concerne de trois façons :

• Les changements de design sont peu coûteux. Comme la mise en forme se trouve juste à côté de chaque bouton, carte ou titre, l'IA peut traduire « rends les cartes moins chargées » en modifiant quelques noms de classes à un seul endroit.
• Vous pouvez le lire. Les classes Tailwind ressemblent à de l'anglais courant. text-center font-bold text-2xl n'est pas difficile à décoder, même si vous n'avez jamais écrit de code.
• L'apparence reste cohérente. Tailwind propose une échelle fixe de tailles, d'espacements et de couleurs. Cela évite qu'une application finisse avec 14 gris légèrement différents.

Une analogie du quotidien

Pensez à la peinture et à la construction d'une maison.

Le CSS classique, c'est mélanger sa propre peinture pour chaque mur. Vous êtes totalement libre, mais au bout d'un moment le salon est « blanc chaud », le couloir « blanc un peu plus chaud », et plus personne ne se souvient pourquoi.

Tailwind, c'est comme le nuancier d'un magasin de peinture accompagné d'étiquettes. Chaque mur reçoit une étiquette — « blanc, mat, 2 couches » — et le nuancier ne propose qu'un ensemble choisi de teintes. Vous perdez un peu de liberté, mais tout le monde sur le chantier sait exactement à quoi doit ressembler chaque mur en lisant l'étiquette.

Comment fonctionne Tailwind

Une page web est construite à partir de HTML (le contenu et la structure) et de CSS (l'apparence). En règle générale, le CSS se trouve dans un fichier séparé avec des règles comme celle-ci :

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Avec Tailwind, on n'écrit pas cette règle : on place directement des classes utilitaires sur l'élément :

<div class="bg-white p-4 rounded-xl shadow-sm">
  Votre réservation est confirmée
</div>

Chaque classe fait une petite tâche précise. Quand l'application est compilée, Tailwind analyse vos fichiers, repère les classes effectivement utilisées et ne génère que le CSS correspondant. La feuille de style finale reste ainsi légère.

Tailwind version 4, la version majeure actuelle, se configure avec très peu de réglages : vous l'installez, ajoutez son plugin à votre outil de compilation et placez @import "tailwindcss"; en haut de votre fichier CSS. Les personnalisations, comme les couleurs de marque et les polices, sont définies en CSS sous forme de jetons de design plutôt que dans un gros fichier de configuration JavaScript, comme l'exigeaient les versions précédentes. Si vous lisez un ancien tutoriel qui mentionne tailwind.config.js, c'est pour cette raison.

Un exemple concret : une carte de tarif

Imaginons que vous ayez demandé à votre outil de création par IA une page de tarifs, et que vous vouliez que la carte « Pro » se démarque. Le code de la carte pourrait ressembler à ceci (dans un composant React, class s'écrit className) :

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">25 
lt;/p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Commencer l'essai
  </button>
</div>

Lecture de gauche à droite :

Si vous demandez « fais ressortir la carte Pro avec une bordure bleue et une ombre discrète », l'IA pourrait remplacer border-gray-200 par border-2 border-blue-600 et ajouter shadow-lg. Le changement tient en cela.

Design adaptatif et mode sombre

Tailwind dispose de préfixes courts pour les tailles d'écran et les états :

• md:grid-cols-3 — trois colonnes sur les écrans moyens et plus grands ; sur un téléphone, la colonne unique par défaut s'applique. Tailwind suit une approche mobile d'abord : les classes sans préfixe s'appliquent partout, et les préfixes ajoutent des changements pour les grands écrans.
• hover:bg-gray-700 — un bouton plus foncé lorsque la souris le survole.
• dark:bg-gray-900 — un fond différent lorsque le mode sombre est activé.

C'est pourquoi demander une mise en page adaptée aux mobiles ou un mode sombre est généralement rapide dans un projet Tailwind.

Termes clés

Idées reçues courantes

• « Tailwind est un design. » Ce n'est pas le cas. Tailwind fournit des briques de construction, pas une apparence. Deux sites Tailwind peuvent avoir un aspect totalement différent. Le « look générique des applications IA » vient des valeurs par défaut, pas de Tailwind lui-même : donnez à votre outil de création une vraie direction. Voir comment concevoir une application esthétique avec l'IA.
• « C'est la même chose que les styles en ligne. » Pas tout à fait. Les classes proviennent d'une échelle commune, prennent en charge le survol, le mode sombre et les points de rupture, et sont transformées en CSS ordinaire au moment de la compilation.
• « Tailwind alourdit les pages. » La compilation n'inclut que les classes utilisées, donc le CSS envoyé aux visiteurs est en général petit.
• « De longues listes de classes signifient un code désordonné. » Elles paraissent chargées au premier abord, mais tout ce qui concerne l'apparence d'un élément est au même endroit. Les motifs répétés sont en général regroupés dans des composants, comme un seul Button.
• « Si j'utilise Tailwind, je ne peux pas utiliser de CSS personnalisé. » Vous pouvez toujours écrire du CSS classique quand vous en avez besoin.

Quoi demander à votre outil de création par IA

• « Définis nos couleurs de marque et nos polices une seule fois sous forme de jetons de thème, et utilise-les partout au lieu de couleurs écrites en dur. »
• « Fais en sorte que chaque carte, chaque bouton et chaque champ utilise le même arrondi et le même espacement. »
• « Vérifie la mise en page à la largeur d'un téléphone et corrige tout ce qui déborde ou qui est trop petit pour être touché. »
• « Ajoute le mode sombre avec la variante dark: de Tailwind et assure-toi que le contraste du texte reste lisible. »
• « Regroupe les styles de bouton répétés dans un seul composant Button réutilisable. »
• « Explique-moi en termes simples les classes Tailwind de cette section. »

Tailwind dans Mythex

Les nouveaux projets Mythex utilisent Tailwind par défaut, avec React et TypeScript. Vous pouvez donc demander des changements visuels en mots simples et les voir dans l'aperçu en direct. Si vous préférez voir le code, l'éditeur de code affiche chaque classe (en lecture seule sur Free, modifiable sur Pro). Si vous préférez du CSS classique ou une autre configuration, dites-le dans votre premier prompt : la documentation explique comment la pile technique est choisie.

Questions