Conseils10 MIN DE LECTURE

Débuter avec Tailwind CSS : le tuto pas à pas pour styliser sans galérer

Tutoriel Tailwind CSS pour débuter de zéro : installation, premières classes, un bouton, une carte produit et le responsive sans media query. Avec exemples de code.

Ordinateur portable ouvert dans le noir, clavier et écran éclairés de néons rose et bleu, avec le titre « La minute code »
Sommaire
Tu veux styliser tes pages sans jongler entre dix fichiers CSS ? Tailwind CSS fait exactement ça : tu écris tes styles directement dans ton HTML, avec des petites classes utilitaires. Pas de nommage à inventer, pas de fichier qui gonfle. Ce tuto part de zéro : installation, premières classes, puis un vrai composant complet. À la fin, tu sauras construire une carte propre sans écrire une seule ligne de CSS classique.

C'est quoi Tailwind, concrètement

En CSS classique, tu écris une classe comme card.css, tu lui donnes un nom (card), puis tu définis ses règles ailleurs. Deux fichiers, deux endroits, et un nom à trouver. Avec Tailwind, tu ne nommes rien. Tu appliques des classes qui font une seule chose chacune : p-4 met du padding, text-lg agrandit le texte, bg-blue-500 met un fond bleu. Tu composes ton style comme des Lego.
comparaison.html
1-/* CSS classique : 2 fichiers */
1+<!-- Tailwind : 1 seul endroit -->
22  
3-/* styles.css */
4-.card {
5- padding: 1rem;
6- background: white;
7- border-radius: 0.5rem;
8- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
9-}
10- 
11-/* index.html */
12-<div class="card">Contenu</div>
3+<div class="p-4 bg-white rounded-lg shadow">
4+ Contenu
5+</div>

Tailwind ne remplace pas le CSS, il te fait juste écrire moins et réfléchir moins au nommage. Tu passes de "comment j'appelle cette classe" à "quel style je veux".

Étape 1 : installer Tailwind

On part du principe que tu as déjà un projet avec Node.js. Si tu utilises Vite (le plus simple pour débuter), voici les commandes. Lance-les une par une :
$ pnpm add tailwindcss @tailwindcss/vite

Cette commande installe Tailwind et son plugin Vite. La version 4 de Tailwind a simplifié l'installation : plus besoin de fichier de config compliqué pour démarrer.

En cours
Ensuite, ajoute le plugin à ta config Vite :
vite.config.jsJavaScript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
Enfin, importe Tailwind dans ton fichier CSS principal. Une seule ligne suffit :
src/style.cssCSS
@import "tailwindcss";
Lance ton serveur de dev et c'est bon, Tailwind est actif :
$ pnpm dev
Étape 2 : tes premières classes
Maintenant le fun commence. Voici les familles de classes que tu utiliseras tout le temps. Chaque classe suit une logique simple.


L'espacement


    

  • p-4 : padding sur tous les côtés (le 4 = 1rem = 16px)
    • 

  • px-4 : padding gauche + droite (x = horizontal)
    • 

  • py-2 : padding haut + bas (y = vertical)
    • 

  • m-4 : margin, même logique
    • 

  • mt-8 : margin uniquement en haut (t = top)
    • 



L'échelle est fixe : 1 = 4px, 2 = 8px, 4 = 16px, 8 = 32px. Tu t'y habitues vite.
Le texte


    

  • text-sm, text-lg, text-2xl : la taille
    • 

  • font-bold, font-medium : le gras
    • 

  • text-gray-700, text-blue-500 : la couleur
    • 

  • text-center : l'alignement
    • 




Les fonds et bordures


    

  • bg-white, bg-blue-500 : couleur de fond
    • 

  • rounded, rounded-lg, rounded-full : arrondis
    • 

  • border, border-2 : bordure
    • 

  • shadow, shadow-lg : ombre portée
    • 

Petite note sur les couleurs : le nombre (100 à 900) indique l'intensité. blue-100 est très clair, blue-900 très foncé. blue-500 est le bleu "moyen", celui que tu utiliseras le plus souvent.
Étape 3 : construire un bouton
Assez de théorie. On construit un bouton propre, étape par étape. Voici la version de base :
bouton.htmlHTML
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Clique-moi
</button>
Décortiquons chaque classe :

    

  • bg-blue-500 : fond bleu
    • 

  • text-white : texte blanc
    • 

  • px-4 : padding horizontal (confort de clic)
    • 

  • py-2 : padding vertical
    • 

  • rounded : coins arrondis
    • 



Maintenant ajoutons un effet au survol avec le préfixe hover:. C'est là que Tailwind devient puissant :
bouton.htmlHTML
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
  Clique-moi
</button>
Le préfixe hover: applique la classe uniquement au survol. Ici, le fond passe de blue-500 à blue-600 (légèrement plus foncé) quand la souris passe dessus. Le transition rend le changement fluide au lieu de brutal.
Les préfixes d'état (hover:, focus:, active:) sont ce qui rend Tailwind vraiment agréable. Tu n'as jamais à quitter ton HTML pour gérer un survol.
Étape 4 : une carte complète
On assemble tout dans une vraie carte produit. C'est l'exemple typique que tu recroiseras partout. Prends le temps de lire chaque classe :
carte-produit.htmlHTML
<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">
  <img class="w-full h-48 object-cover" src="/produit.jpg" alt="Produit">
  
  <div class="p-4">
    <h3 class="text-lg font-bold text-gray-800">
      Nom du produit
    </h3>
    <p class="text-sm text-gray-600 mt-1">
      Une courte description qui donne envie.
    </p>
    
    <div class="flex items-center justify-between mt-4">
      <span class="text-xl font-bold text-blue-600">29€</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
        Acheter
      </button>
    </div>
  </div>
</div>
Deux nouvelles notions clés apparaissent ici :


Flexbox en une classe

flex active flexbox. items-center centre verticalement, justify-between pousse le prix à gauche et le bouton à droite. Trois classes remplacent une dizaine de lignes de CSS.


Contraintes de taille

max-w-sm limite la largeur de la carte. w-full fait prendre toute la largeur à l'image. object-cover évite que l'image se déforme.
Étape 5 : le responsive, sans media queries
Voici le point qui change tout quand tu viens du CSS classique. En CSS, pour le responsive tu écris des media queries. Avec Tailwind, tu ajoutes juste un préfixe de taille d'écran devant ta classe.

Les préfixes :

    

  • sm: → à partir de 640px
    • 

  • md: → à partir de 768px
    • 

  • lg: → à partir de 1024px
    • 

  • xl: → à partir de 1280px
    • 

Exemple : un texte petit sur mobile, grand sur desktop :
titre.htmlHTML
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Titre responsive
</h1>
Lecture : le texte fait text-2xl par défaut (mobile), passe à text-4xl à partir de 768px, et text-6xl au-delà de 1024px. Le principe est mobile-first : la classe sans préfixe s'applique au mobile, les préfixes ajoutent les tailles supérieures.
Un cas très courant : une grille qui passe de 1 colonne (mobile) à 3 colonnes (desktop) :
grille.htmlHTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Carte 1</div>
  <div>Carte 2</div>
  <div>Carte 3</div>
</div>
Tu ne quittes jamais ton HTML. Tout le responsive tient dans la ligne de classes. C'est déroutant au début, puis tu ne peux plus t'en passer.
Le piège à éviter : les classes dynamiques
Une erreur classique quand tu débutes avec un framework JS : construire un nom de classe à la volée. Tailwind ne verra pas ces classes et ne les générera pas. Regarde :
classes-dynamiques.jsx
1-// ❌ Tailwind ne détecte PAS cette classe
2-const color = "blue";
1+// ✅ écris la classe complète
2+const styles = {
3+  blue: "bg-blue-500",
4+  red: "bg-red-500",
5+};
36  
4-function Button() {
7+function Button({ color }) {
58   return (
6-    <button className={`bg-${color}-500`}>
9+    <button className={styles[color]}>
710       Bouton
811     </button>
912   );
10-}
11-// Résultat : aucun style appliqué
13+}
Pourquoi ? Tailwind scanne ton code au build pour ne générer que les classes réellement utilisées. Il cherche des chaînes complètes. bg-blue-500 écrit en entier est trouvé ; bg-${color}-500 ne l'est jamais. Écris toujours tes classes en toutes lettres.
Ce que Tailwind ne fait pas
Pour être honnête, Tailwind n'est pas magique et n'est pas toujours le bon choix :

    

  • Ton HTML devient verbeux. Une carte peut avoir 15 classes sur une ligne. Ça se lit moins bien qu'un joli nom de classe unique.
    • 

  • Pour des animations complexes, tu reviendras souvent au CSS classique.
    • 

  • Sur un très petit projet (une page statique simple), l'install peut être du sur-équipement.
    • 



La règle : Tailwind brille sur des projets avec beaucoup de composants répétés (e-commerce, dashboard, app). Pour une landing page de trois blocs, du CSS simple suffit.
Récapitulatif
Tu sais maintenant l'essentiel :

    

  1. Installer Tailwind avec Vite en trois commandes
    2. 

  2. Utiliser les classes d'espacement, texte, fond et bordure
    3. 

  3. Ajouter des états avec hover: et une transition
    4. 

  4. Composer une carte complète avec flex et grid
    5. 

  5. Gérer le responsive avec md: et lg:, sans media query
    6. 

  6. Éviter le piège des classes construites dynamiquement
    7. 



La meilleure façon de progresser : ouvre la doc officielle à côté, et reconstruis un composant que tu connais déjà. En une après-midi, les classes rentrent dans les doigts.
Partager
À lire aussi
08Deux formules, un appel
30 minutes pour décider
si on travaille ensemble.
Réserver mon appel