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

Tailwind CSS est une boîte à outils pour la mise en forme des 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. Tailwind produit ensuite le CSS dont le navigateur a besoin. Il est gratuit, libre et l'une des façons les plus courantes de mettre en forme les applications web modernes.

Pourquoi Tailwind est important quand on construit avec l'IA

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

Cela vous touche 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 et titre, l'IA peut traiter « rends les cartes moins chargées » en modifiant quelques classes au même endroit.
• Vous pouvez le lire. Les classes Tailwind ressemblent beaucoup à 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.
• Le look reste cohérent. Tailwind propose une échelle fixe de tailles, d'espacements et de couleurs. Cela évite qu'une application se retrouve 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 votre propre peinture pour chaque mur. Vous êtes entièrement libre, mais au bout d'un moment le salon est « blanc chaud », le couloir « blanc un peu plus chaud », et personne ne se souvient pourquoi.

Tailwind, c'est un nuancier de magasin de peinture accompagné d'étiquettes identifiées. Chaque mur reçoit une étiquette, par exemple « blanc, mat, 2 couches », et le nuancier n'offre qu'une série choisie 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). Normalement, 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, vous n'écrivez pas cette règle et placez plutôt des classes utilitaires directement sur l'élément :

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

Chaque classe accomplit une petite tâche. Lorsque 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 petite.

Tailwind version 4, la version majeure actuelle, se configure avec très peu de réglages : vous l'installez, ajoutez son extension à votre outil de compilation et écrivez @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 anciennes versions. Si vous lisez un tutoriel plus ancien qui mentionne tailwind.config.js, c'est pour cette raison.

Exemple concret : une carte de tarification

Supposons que vous ayez demandé à votre outil IA une page de tarifs et que vous vouliez faire ressortir la carte « Pro ». 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</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </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. C'est tout le changement.

Design adaptatif et mode sombre

Tailwind utilise de courts préfixes 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 est conçu d'abord pour le mobile : 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, c'est un design. » Non. Tailwind fournit des blocs de construction, pas un look. Deux sites Tailwind peuvent être complètement différents. Le « look d'application IA » générique vient des valeurs par défaut, pas de Tailwind lui-même : donnez à votre outil de véritables consignes. 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 lors de la compilation.
• « Tailwind alourdit les pages. » La compilation n'inclut que les classes utilisées, donc le CSS envoyé aux visiteurs est généralement petit.
• « De longues listes de classes signifient du code désordonné. » Elles paraissent chargées au départ, mais tout ce qui concerne l'apparence d'un élément se trouve au même endroit. Les motifs répétés sont habituellement 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 ordinaire quand vous en avez besoin.

Quoi demander à votre outil IA

• « Définis nos couleurs de marque et nos polices une seule fois comme jetons de thème, et utilise-les partout au lieu de couleurs codées en dur. »
• « Fais en sorte que chaque carte, bouton et champ utilise le même rayon de coin 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 répétés des boutons dans un seul composant Button réutilisable. »
• « Explique-moi en langage simple 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 termes 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 le plan Gratuit, modifiable sur Pro). Si vous préférez du CSS simple ou une autre configuration, dites-le dans votre première demande : la documentation explique comment la pile technologique est choisie.

Questions