Exercices pratiques : Premiers pas avec Tailwind dans Vue

Bon, t'as vu la théorie, maintenant tu vas pratiquer. Et non, je vais pas te tenir la main pour chaque classe. T'as la doc officielle de Tailwind et des IA comme ChatGPT, Claude, ou Cursor pour t'aider. Apprends à chercher, c'est LA compétence d'un dev. 🧠

Objectif

Créer différents styles de boutons et composants uniquement avec Tailwind, directement dans ton fichier App.vue. Pas encore de composants séparés, juste une mise en jambe pour te familiariser avec les classes Tailwind.

Une fois un exercice terminé, appelle le prof pour lui montrer le résultat et valider avant de passer au suivant. 🎯

Setup pour les exercices

Ouvre ton fichier src/App.vue et remplace tout son contenu par ceci :

<template>
  <div class="min-h-screen bg-gray-100 p-8">
    <h1 class="text-4xl font-bold mb-8 text-center text-gray-800">
      Mes exercices Tailwind 🎨
    </h1>
    
    <!-- Tes exercices vont ici -->
    
  </div>
</template>

<script setup>
// Rien pour l'instant, on se concentre sur le HTML + Tailwind
</script>

Lance ton serveur si c'est pas déjà fait :

npm run dev

Ouvre ton navigateur sur http://localhost:5173 et c'est parti ! 🚀

Exercice 1 : Collection de boutons stylés

Consigne : Dans ton <template>, crée 5 boutons avec des styles complètement différents. Mets-les dans une div avec de l'espacement pour que ce soit propre.

Structure de base

<template>
  <div class="min-h-screen bg-gray-100 p-8">
    <h1 class="text-4xl font-bold mb-8 text-center text-gray-800">
      Mes exercices Tailwind 🎨
    </h1>
    
    <!-- Section boutons -->
    <section class="mb-12">
      <h2 class="text-2xl font-bold mb-6">Collection de boutons</h2>
      <div class="flex flex-wrap gap-4">
        
        <!-- Tes 5 boutons ici -->
        
      </div>
    </section>
    
  </div>
</template>

Bouton 1 - Classique élégant

Critères :

Fond bleu dégradé
Texte blanc
Coins arrondis
Ombre douce
Effet au survol (changement de couleur)

Exemple de résultat attendu :

<button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white px-6 py-3 rounded-lg shadow-lg hover:from-blue-600 hover:to-blue-800 transition">
  Bouton Élégant
</button>

Bouton 2 - Brutaliste

Critères :

Fond jaune vif
Bordure noire épaisse (4px minimum)
Texte noir en majuscules
Police extra-bold
Au survol : décalage visuel (translate) pour effet "3D brutal"

Indice : Cherche les classes border, uppercase, font-extrabold, et hover:-translate-x / hover:-translate-y dans la doc Tailwind. 💀

Bouton 3 - Glassmorphism (effet verre)

Critères :

Fond semi-transparent blanc
Bordure fine blanche
Effet de flou en arrière-plan (backdrop-blur)
Ombre claire
Texte foncé

Indice : Regarde du côté de bg-white/30 (opacité), backdrop-blur-lg, et border border-white/50.

Rendu attendu : Un bouton qui ressemble à du verre dépoli. Stylé pour des interfaces modernes. ✨

Bouton 4 - Néon Cyberpunk

Critères :

Fond transparent ou sombre
Texte couleur fluo (vert, rose, cyan...)
Bordure fluo épaisse
Ombre colorée (shadow-[couleur])
Animation au survol

Exemple inspiration :

<button class="bg-black text-cyan-400 border-2 border-cyan-400 px-6 py-3 rounded font-bold shadow-lg shadow-cyan-400/50 hover:bg-cyan-400 hover:text-black transition">
  Bouton Cyberpunk
</button>

Bouton 5 - Minimaliste japonais

Critères :

Fond blanc ou très clair
Texte gris foncé
Bordure fine grise
Pas d'ombre (ou très subtile)
Effet hover minimaliste (juste un léger changement de background)

Philosophie : Moins c'est plus. Sobriété et élégance. 🍵

Validation

Une fois tes 5 boutons créés, appelle le prof pour lui montrer. Il vérifiera :

Chaque bouton a un style vraiment différent des autres
Tous ont un effet hover visible
Le code est propre (pas 50 classes inutiles)
Ça ressemble à quelque chose de professionnel

Exercice 2 : Carte de profil

Consigne : Crée une carte de profil stylée avec photo, nom, bio, et bouton d'action. Ajoute une nouvelle section dans ton template :

<!-- Section carte de profil -->
<section class="mb-12">
  <h2 class="text-2xl font-bold mb-6">Carte de profil</h2>
  
  <div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
    <!-- Ton code de carte ici -->
    <img src="https://i.pravatar.cc/300" alt="Avatar" class="...">
    <div class="p-6">
      <h3 class="...">John Doe</h3>
      <p class="...">Designer & Developer</p>
      <button class="...">Suivre</button>
    </div>
  </div>
</section>

Critères à respecter

Image : Doit remplir toute la largeur en haut de la carte, hauteur fixe ~200px, object-cover pour pas déformer
Nom : Texte gras, taille ~2xl, centré
Bio : Texte gris, taille normale, centré
Bouton : Style de ton choix (mais cohérent avec la carte), centré en bas
Spacing : Utilise du padding pour que ça respire

Bonus : Ajoute un hover effect sur toute la carte (exemple : ombre plus prononcée, légère élévation avec hover:scale-105 + transition-transform).

Une fois terminé, appelle le prof pour validation.

Consigne : Crée une navbar simple qui s'adapte entre mobile et desktop.

Ajoute cette section au début de ton template

<template>
  <div class="min-h-screen bg-gray-100">
    
    <!-- Navbar -->
    <nav class="bg-white shadow-md p-4 mb-8">
      <div class="container mx-auto flex justify-between items-center">
        <!-- Logo -->
        <div class="text-2xl font-bold text-indigo-600">MonSite</div>
        
        <!-- Menu desktop (caché sur mobile) -->
        <div class="hidden md:flex space-x-6">
          <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Accueil</a>
          <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Projets</a>
          <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Contact</a>
        </div>
        
        <!-- Bouton hamburger (visible sur mobile) -->
        <button class="md:hidden text-gray-700 text-2xl">
          ☰
        </button>
      </div>
    </nav>
    
    <!-- Le reste de ton contenu -->
    <div class="p-8">
      <h1 class="text-4xl font-bold mb-8 text-center text-gray-800">
        Mes exercices Tailwind 🎨
      </h1>
      <!-- ... tes autres sections ... -->
    </div>
  </div>
</template>

Il ne se passe encore rien quand on clic sur le bouton hamburger, c’est normal, on verra ça plus tard. Customise le design pour lui donner de la personnalité !

Test

Réduis la taille de ton navigateur (DevTools → mode responsive). Les liens doivent disparaître et le hamburger apparaître. À partir de 768px (tablette), l'inverse. 📱💻

Montre au prof que ça fonctionne bien en responsive.

Exercice 4 : Formulaire de contact stylé

Consigne : Crée un formulaire avec champs stylés et bouton d'envoi.

Ajoute cette section

<!-- Section formulaire -->
<section class="mb-12">
  <h2 class="text-2xl font-bold mb-6">Formulaire de contact</h2>
  
  <div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
    <form class="space-y-4">
      
      <!-- Champ Nom -->
      <div>
        <label class="block text-gray-700 font-medium mb-2">Nom complet</label>
        <input 
          type="text" 
          placeholder="John Doe"
          class="w-full border border-gray-300 rounded px-4 py-2 focus:border-indigo-500 focus:outline-none"
        >
      </div>
      
      <!-- Champ Email -->
      <div>
        <label class="block text-gray-700 font-medium mb-2">Email</label>
        <input 
          type="email" 
          placeholder="john@example.com"
          class="w-full border border-gray-300 rounded px-4 py-2 focus:border-indigo-500 focus:outline-none"
        >
      </div>
      
      <!-- Champ Message -->
      <div>
        <label class="block text-gray-700 font-medium mb-2">Message</label>
        <textarea 
          rows="4"
          placeholder="Votre message..."
          class="w-full border border-gray-300 rounded px-4 py-2 focus:border-indigo-500 focus:outline-none"
        ></textarea>
      </div>
      
      <!-- Bouton -->
      <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition">
        Envoyer
      </button>
      
    </form>
  </div>
</section>

Critères de style

Tous les inputs/textarea ont déjà le bon style dans l'exemple ci-dessus
Le bouton doit se démarquer avec une couleur vive
Largeur complète pour tous les éléments du formulaire
Style focus: sur les champs (changement de bordure quand tu cliques dedans)

Teste le formulaire en cliquant dans les champs pour voir l'effet focus, modifie le design à ta sauce, puis appelle le prof.

Exercice 5 : Grille de cards responsive

Consigne : Crée une grille de 6 cards (cartes de projet) qui s'adapte selon la taille d'écran.

Ajoute cette section

<!-- Section grille de projets -->
<section class="mb-12">
  <h2 class="text-2xl font-bold mb-6">Mes projets</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    
    <!-- Card 1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=1" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 1</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">Design</span>
      </div>
    </div>
    
    <!-- Card 2 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=2" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 2</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">Web</span>
      </div>
    </div>
    
    <!-- Card 3 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=3" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 3</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full">Branding</span>
      </div>
    </div>
    
    <!-- Card 4 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=4" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 4</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">Mobile</span>
      </div>
    </div>
    
    <!-- Card 5 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=5" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 5</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">E-commerce</span>
      </div>
    </div>
    
    <!-- Card 6 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img src="https://picsum.photos/400/250?random=6" alt="Projet" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2">Projet 6</h3>
        <p class="text-gray-600 mb-4">Description courte du projet ici.</p>
        <span class="inline-block bg-indigo-100 text-indigo-800 text-sm px-3 py-1 rounded-full">App</span>
      </div>
    </div>
    
  </div>
</section>

Layout responsive

Mobile : 1 colonne (déjà fait avec grid-cols-1)
Tablette (md:) : 2 colonnes (md:grid-cols-2)
Desktop (lg:) : 3 colonnes (lg:grid-cols-3)

Validation : Réduis/agrandis la fenêtre du navigateur. La grille doit s'adapter automatiquement. Change complètement le design des cards. Montre ça au prof en mode responsive. 🔥

Utilise tes ressources !

Bloqué sur une classe ? Voici comment chercher efficacement :

Documentation Tailwind

Va sur tailwindcss.com/docs
Utilise la barre de recherche (super rapide)
Exemples de recherches utiles :
- "shadow" → toutes les classes d'ombres
- "gradient" → dégradés
- "hover" → variantes interactives

Demande à une IA

Prompt efficace :

"Comment faire un bouton avec effet glassmorphism en Tailwind CSS ?"

Mauvais prompt :

"Bouton" (trop vague, tu vas avoir un truc générique)

Exercices pratiques : Premiers pas avec Tailwind dans Vue

Objectif#

Setup pour les exercices#

Exercice 1 : Collection de boutons stylés#

Structure de base#

Bouton 1 - Classique élégant#

Bouton 2 - Brutaliste#

Bouton 3 - Glassmorphism (effet verre)#

Bouton 4 - Néon Cyberpunk#

Bouton 5 - Minimaliste japonais#

Validation#

Exercice 2 : Carte de profil#

Critères à respecter#

Exercice 3 : Barre de navigation responsive#

Ajoute cette section au début de ton template#

Test#

Exercice 4 : Formulaire de contact stylé#

Ajoute cette section#

Critères de style#

Exercice 5 : Grille de cards responsive#

Ajoute cette section#

Layout responsive#

Utilise tes ressources !#

Documentation Tailwind#

Demande à une IA#

Objectif

Setup pour les exercices

Exercice 1 : Collection de boutons stylés

Structure de base

Bouton 1 - Classique élégant

Bouton 2 - Brutaliste

Bouton 3 - Glassmorphism (effet verre)

Bouton 4 - Néon Cyberpunk

Bouton 5 - Minimaliste japonais

Validation

Exercice 2 : Carte de profil

Critères à respecter

Exercice 3 : Barre de navigation responsive

Ajoute cette section au début de ton template

Test

Exercice 4 : Formulaire de contact stylé

Ajoute cette section

Critères de style

Exercice 5 : Grille de cards responsive

Ajoute cette section

Layout responsive

Utilise tes ressources !

Documentation Tailwind

Demande à une IA