CodeWorlds

Cours Vibe coding avec l'IA · Module 2: Configuration de Next.js

Tailwind CSS - Styliser sans écrire de CSS

6 min de lecture
Dans cette leçon9

Il est temps d'apprendre Tailwind CSS - l'un des frameworks CSS les plus populaires (create-next-app l'installe par défaut).

Qu'est-ce que Tailwind CSS ?

Tailwind est un framework CSS utility-first. Au lieu d'écrire du CSS à la main, tu utilises des classes prêtes à l'emploi.

CSS traditionnel :

1.button {
2  background-color: #dc2626;
3  color: white;
4  padding: 12px 24px;
5  border-radius: 8px;
6  font-weight: 600;
7}
1<button class="button">Clique-moi</button>

Tailwind CSS :

1<button class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold">
2  Clique-moi
3</button>

Tout dans les classes HTML ! Tu n'écris pas de CSS - tu utilises des classes prêtes à l'emploi.

Pourquoi Tailwind ?

Rapidité - pas d'aller-retour entre HTML et CSS Cohérence - un seul système de couleurs, d'espacements Responsivité - des breakpoints faciles (sm:, md:, lg:) Pas de conflits - pas de styles écrasés par accident Tree-shaking - seules les classes utilisées dans le CSS final Utilisé par - entre autres OpenAI, Shopify, Reddit et la NASA JPL (liste sur tailwindcss.com)

Classes Tailwind de base

1. Couleurs

Arrière-plan :

  • bg-red-500 - fond rouge
  • bg-blue-600 - fond bleu
  • bg-black - fond noir
  • bg-white - fond blanc

Texte :

  • text-red-500 - texte rouge
  • text-blue-600 - texte bleu
  • text-gray-900 - texte gris foncé

Les couleurs ont des nuances de 50 (la plus claire) à 950 (la plus foncée).

2. Padding et Margin

Padding (espacement intérieur) :

  • p-4 - padding de 16px sur tous les côtés
  • px-4 - padding de 16px à gauche et à droite
  • py-4 - padding de 16px en haut et en bas
  • pt-4 - padding-top de 16px
  • pr-4 - padding-right de 16px

Margin (espacement extérieur) :

  • m-4 - margin de 16px
  • mx-auto - centrage (margin gauche/droite auto)
  • mt-8 - margin-top de 32px

Échelle : 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40...

  • p-1 = 4px
  • p-2 = 8px
  • p-4 = 16px
  • p-8 = 32px

Regarde différents paddings côte à côte et change les nombres dans les classes :

Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Padding Tailwind</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-gray-100 p-8">
10    <!-- Exemple de padding -->
11    <div class="bg-black text-white p-4">
12        Ceci est un div avec un fond noir, du texte blanc et un padding de 16px (p-4)
13    </div>
14
15    <div class="mt-4 bg-blue-600 text-white px-8 py-4">
16        Ce div a un padding horizontal de 32px (px-8) et vertical de 16px (py-4)
17    </div>
18
19    <div class="mt-4 bg-red-600 text-white p-0">
20        Ce div a un padding de 0 (p-0)
21    </div>
22
23    <div class="mt-4 bg-green-600 text-white p-8">
24        Ce div a un padding de 32px (p-8)
25    </div>
26</body>
27</html>

3. Texte

Taille :

  • text-xs - extra petit
  • text-sm - petit
  • text-base - normal (16px)
  • text-lg - grand
  • text-xl - extra grand
  • text-2xl, text-3xl, text-4xl - plus grand

Épaisseur :

  • font-light - léger
  • font-normal - normal
  • font-medium - moyen
  • font-semibold - semi-gras
  • font-bold - gras

Alignement :

  • text-left - à gauche
  • text-center - centré
  • text-right - à droite

4. Layout

Display :

  • block - display: block
  • inline - display: inline
  • flex - display: flex
  • grid - display: grid
  • hidden - display: none

Flexbox :

  • flex - active le flexbox
  • flex-row - direction horizontale (par défaut)
  • flex-col - direction verticale
  • items-center - centrage vertical
  • justify-center - centrage horizontal
  • gap-4 - espace entre les éléments

Voici un élément centré verticalement et horizontalement (h-screen lui donne la hauteur de tout l'écran) :

Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox Tailwind</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body>
10    <!-- Flexbox centré verticalement et horizontalement -->
11    <div class="flex items-center justify-center h-screen bg-gradient-to-br from-blue-500 to-purple-600">
12        <div class="bg-white p-8 rounded-lg shadow-2xl">
13            <h1 class="text-3xl font-bold text-gray-800 mb-4">
14                Élément centré !
15            </h1>
16            <p class="text-gray-600">
17                Ce div est centré verticalement et horizontalement grâce à :
18            </p>
19            <ul class="mt-4 space-y-2 text-sm text-gray-700">
20                <li><code class="bg-gray-100 px-2 py-1 rounded">flex</code> - active le flexbox</li>
21                <li><code class="bg-gray-100 px-2 py-1 rounded">items-center</code> - centrage vertical</li>
22                <li><code class="bg-gray-100 px-2 py-1 rounded">justify-center</code> - centrage horizontal</li>
23                <li><code class="bg-gray-100 px-2 py-1 rounded">h-screen</code> - hauteur 100vh</li>
24            </ul>
25        </div>
26    </div>
27</body>
28</html>

5. Largeur et Hauteur

Largeur :

  • w-full - width: 100%
  • w-1/2 - width: 50%
  • w-screen - width: 100vw
  • max-w-md - max-width: 448px
  • max-w-4xl - max-width: 896px

Hauteur :

  • h-screen - height: 100vh (plein écran)
  • min-h-screen - min-height: 100vh

6. Border et Radius

Border :

  • border - bordure de 1px
  • border-2 - bordure de 2px
  • border-red-500 - bordure rouge

Radius (arrondi) :

  • rounded - border-radius de 4px
  • rounded-lg - arrondi plus grand
  • rounded-full - arrondi maximal : une pilule, et un cercle sur un carré

Responsivité - Breakpoints

Tailwind a des breakpoints intégrés :

  • sm: - à partir de 640px
  • md: - à partir de 768px (par exemple une tablette en portrait)
  • lg: - à partir de 1024px (par exemple une tablette en paysage, un petit portable)
  • xl: - à partir de 1280px (ordinateur portable, écran)
  • 2xl: - à partir de 1536px (grand écran)

Chaque préfixe s'applique à partir de la largeur indiquée.

Exemple :

1<div class="text-sm md:text-base lg:text-lg">
2  Texte responsive
3</div>
  • Mobile : text-sm (14px)
  • Tablette : text-base (16px)
  • Ordinateur portable : text-lg (18px)

Mobile-first : tu écris d'abord pour le mobile, puis tu ajoutes des breakpoints pour les écrans plus grands.

Change la largeur de l'aperçu et regarde le nombre de colonnes et la taille du texte changer :

Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Responsivité Tailwind</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-gray-100 p-8">
10    <h1 class="text-3xl font-bold mb-8 text-center">
11        La responsivité dans Tailwind
12    </h1>
13
14    <!-- Mobile : 1 colonne, Tablette : 2 colonnes, Bureau : 3 colonnes -->
15    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
16        <div class="bg-blue-500 text-white p-6 rounded-lg">
17            <h2 class="text-xl font-bold mb-2">Carte 1</h2>
18            <p>Redimensionne la fenêtre pour voir la responsivité !</p>
19        </div>
20        <div class="bg-purple-500 text-white p-6 rounded-lg">
21            <h2 class="text-xl font-bold mb-2">Carte 2</h2>
22            <p>Mobile : 1 colonne<br>Tablette (md) : 2 colonnes<br>Bureau (lg) : 3 colonnes</p>
23        </div>
24        <div class="bg-pink-500 text-white p-6 rounded-lg">
25            <h2 class="text-xl font-bold mb-2">Carte 3</h2>
26            <p>Breakpoints :<br>sm: 640px<br>md: 768px<br>lg: 1024px</p>
27        </div>
28    </div>
29
30    <!-- Texte responsive -->
31    <div class="mt-8 bg-white p-6 rounded-lg shadow">
32        <p class="text-sm md:text-base lg:text-lg xl:text-xl">
33            Ce texte a différentes tailles :<br>
34            Mobile : text-sm (14px)<br>
35            Tablette : text-base (16px)<br>
36            Ordinateur portable : text-lg (18px)<br>
37            Bureau : text-xl (20px)
38        </p>
39    </div>
40</body>
41</html>

Exemple pratique - Bouton pirate

1<button class="
2  bg-red-600
3  hover:bg-red-700
4  text-white
5  font-bold
6  py-3
7  px-6
8  rounded-lg
9  transition-colors
10  duration-200
11">
12  Rejoins l'équipage !
13</button>

Ce qui se passe :

  • bg-red-600 - fond rouge
  • hover:bg-red-700 - plus foncé au survol
  • text-white - texte blanc
  • font-bold - gras
  • py-3 - padding haut/bas
  • px-6 - padding gauche/droite
  • rounded-lg - coins arrondis
  • transition-colors - transition de couleur fluide
  • duration-200 - transition de 200ms

Utiliser l'IA pour Tailwind

Au lieu de mémoriser toutes les classes, demande à l'IA !

Prompt :

1Create a pirate hero section in Tailwind with a black background, red heading and gold button

L'IA va générer tout le code avec les classes Tailwind appropriées !

Tailwind dans Next.js

Dans Next.js, Tailwind est déjà configuré si tu as choisi les réglages recommandés ou Tailwind CSS en créant le projet.

Fichiers de configuration :

  • app/globals.css - importe Tailwind et définit le thème (le bloc @theme)
  • postcss.config.mjs - branche le plugin @tailwindcss/postcss

En haut de globals.css tu verras :

1@import "tailwindcss";

Cette seule ligne importe toutes les classes Tailwind. C'est la syntaxe de Tailwind 4 : les anciennes directives @tailwind base, @tailwind components et @tailwind utilities et le fichier tailwind.config.ts viennent de la version 3 et n'existent pas dans les nouveaux projets.

Dark Mode dans Tailwind

Tailwind prend en charge le mode sombre :

1<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
2  Auto dark mode!
3</div>

Résumé

Tailwind CSS - framework utility-first Classes dans le HTML - pas d'écriture de CSS à la main bg-, text-, p-, m- - classes de base sm:, md:, lg: - breakpoints responsive hover:, focus: - états interactifs L'IA aide - demande des styles précis

Dans le prochain exercice, nous allons créer une landing page pour « Kraken's Call » !

À tout de suite !

Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Bouton pirate</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-gray-900 flex items-center justify-center h-screen">
10    <div class="text-center">
11        <h1 class="text-5xl font-bold text-white mb-8">
12            Black Pearl of Code
13        </h1>
14
15        <!-- Bouton pirate avec effet de survol -->
16        <button class="
17            bg-red-600
18            hover:bg-red-700
19            text-white
20            font-bold
21            px-6
22            py-3
23            rounded-lg
24            transition-colors
25            duration-200
26            shadow-lg
27            hover:shadow-xl
28            transform
29            hover:scale-105
30        ">
31            Rejoins l'équipage !
32        </button>
33
34        <div class="mt-8 max-w-md mx-auto">
35            <p class="text-gray-400 text-sm">
36                Survole le bouton pour voir l'effet de survol !
37            </p>
38            <div class="mt-4 bg-gray-800 p-4 rounded text-left text-xs text-gray-300">
39                <p class="font-mono">
40                    bg-red-600 hover:bg-red-700<br>
41                    text-white font-bold<br>
42                    px-6 py-3 rounded-lg<br>
43                    transition-colors duration-200<br>
44                    shadow-lg hover:shadow-xl<br>
45                    transform hover:scale-105
46                </p>
47            </div>
48        </div>
49    </div>
50</body>
51</html>

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

  1. 1. Qu'est-ce que Tailwind CSS ?

  2. 2. Quelle classe Tailwind définit un arrière-plan rouge ?

  3. 3. Quel préfixe Tailwind applique un style à partir d'une largeur d'écran de 768px ?

  4. 4. Quelle classe Tailwind centre horizontalement les éléments dans un flexbox ?

  5. 5. Que fait la classe hover:bg-red-700 dans Tailwind ?

  6. 6. Quelle classe Tailwind définit la largeur de l'élément à 100% ?

  7. 7. Que dois-tu faire pour utiliser Tailwind dans Next.js si tu as choisi Tailwind CSS (ou les réglages recommandés) en créant le projet ?

  8. 8. Que fait le préfixe dark: dans une classe Tailwind (par exemple dark:bg-gray-900) ?

  9. 9. Quelle classe Tailwind définit la hauteur sur tout l'écran (100vh) ?

  10. 10. Quelle classe Tailwind centre un bloc à l'aide de marges gauche et droite automatiques ?

  11. 11. Quelle classe Tailwind cache un élément (display: none) ?

Tâches pratiques dans le jeu

  • Éditeur de code

    Crée un div avec un arrière-plan noir (bg-black), un texte blanc (text-white) et un padding de 16px (p-4). Mets-y n'importe quel texte.

  • Clique dans l'ordre

    Construis la classe Tailwind qui définit un texte blanc :

  • Tri vertical

    Ordonne les classes de padding Tailwind de la plus petite à la plus grande :

  • Éditeur de code

    Crée un div avec les classes flex, items-center, justify-center et h-screen, et place à l'intérieur un élément avec du texte, par exemple <p>. L'élément doit se placer au milieu de l'écran, verticalement et horizontalement.

  • Tri vertical

    Ordonne les points de rupture (breakpoints) Tailwind du plus petit écran au plus grand :

  • Tri horizontal

    Ordonne le code d'un bouton rouge Tailwind (de gauche à droite) :

  • Éditeur de code

    Construis un bouton de pirate <button> : arrière-plan rouge (par exemple bg-red-600), texte blanc (text-white), padding (par exemple px-6 py-3), coins arrondis (par exemple rounded-lg) et un arrière-plan plus foncé au survol de la souris (par exemple hover:bg-red-700).

  • Clique dans l'ordre

    Construis la classe Tailwind qui arrondit les coins avec un rayon plus grand :

  • Tri horizontal

    Ordonne les parties de la classe Tailwind pour un arrière-plan rouge (de gauche à droite) :

  • Tri vertical

    Ordonne les classes de graisse de police Tailwind de la plus fine à la plus grasse :

  • Tri vertical

    Ordonne les classes de taille de texte Tailwind de la plus petite à la plus grande :

  • Tri vertical

    Ordonne les classes nécessaires pour centrer un élément verticalement et horizontalement avec Tailwind :

  • Tri horizontal

    Ordonne les parties de la classe Tailwind pour une marge supérieure de 32px (de gauche à droite) :

  • Tri vertical

    Ordonne les étapes pour utiliser l'IA dans Cursor afin de générer des styles Tailwind :

  • Clique dans l'ordre

    Construis la classe Tailwind pour un texte extra-large :

  • Clique dans l'ordre

    Construis la classe Tailwind qui définit la direction verticale du flexbox :

Articles utiles

Nous utilisons des cookies pour améliorer ton expérience sur le site
Politique de confidentialité
OK