TailwindCSS

Tailwind CSS v3 – Bases & Exemples Pratiques

1. À propos de Tailwind CSS

Tailwind CSS est un framework CSS utility-first, c’est-à-dire qu’il propose des classes prédéfinies à utiliser directement dans le HTML pour créer rapidement des interfaces stylées, sans écrire de CSS traditionnel.

Avec Tailwind, fini les prises de tête pour nommer ses classes ou jongler entre plusieurs fichiers CSS : tout se fait directement dans votre balisage HTML. Résultat ? Vous développez plus vite, votre code est plus lisible, et vos interfaces restent cohérentes.

Exemple concret rapide :

Au lieu d’écrire du CSS traditionnel comme ceci :

/* CSS traditionnel (ennuyeux) */
.bouton-primaire {
  background-color: #3490dc;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

Puis l’utiliser en HTML :

<button class="bouton-primaire">Cliquez-moi</button>

Avec Tailwind, on écrit simplement :

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Cliquez-moi
</button>

Pas de fichier CSS externe, pas de nom de classe à inventer, juste des utilitaires simples à combiner.

Ce que vous allez apprendre dans ce chapitre :

Comment utiliser efficacement les classes utilitaires Tailwind pour styliser vos composants (boutons, formulaires, etc.).
Construire rapidement des mises en page (Flexbox et Grid).
Rendre vos interfaces responsive et interactives sans douleur.

On passe tout de suite à la pratique ! 🫡🔥

2. Les bases incontournables

Ici, tu vas apprendre les fondamentaux pour créer des composants stylés avec Tailwind CSS. Chaque section est illustrée par plusieurs exemples dans des styles très variés (moderne, brutaliste, skeuomorphe). Tu vas vite piger que Tailwind, c'est la simplicité ET la flexibilité.

2.1 Boutons

Un bouton réussi combine une bonne couleur, du padding, un texte lisible et des effets d’interaction simples (hover, focus). Voici trois variantes complètement différentes pour t’inspirer :

Exemple 1 – Moderne (flat, minimaliste)

<button class="bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition">
  Bouton Moderne
</button>

Exemple 2 – Brutaliste (contrastes forts, style agressif)

<button class="border-4 border-black bg-yellow-300 text-black px-6 py-3 uppercase font-extrabold hover:bg-yellow-400 shadow-brutalist transition-transform hover:-translate-x-1 hover:-translate-y-1">
  Clique-moi fort
</button>

(Tu peux définir l'ombre "brutaliste" toi-même plus tard via config Tailwind.)

Exemple 3 – Skeuomorphisme (effet réaliste avec ombres et relief)

<button class="bg-gradient-to-b from-gray-200 to-gray-400 text-gray-800 px-4 py-2 rounded-lg shadow-inner border border-gray-500 hover:shadow-xl transition-shadow">
  Bouton 3D
</button>

Tableau récap des classes clés pour les boutons :

Classe	Utilité	Exemple
`bg-{couleur}`	Couleur de fond	`bg-indigo-500`
`text-{couleur}`	Couleur texte	`text-white`
`px-{n}`, `py-{n}`	Padding (horiz/vert)	`px-4 py-2`
`rounded`	Coins arrondis	`rounded-lg`, `rounded-full`
`border`	Bordure	`border-2 border-black`
`hover:`	Style au survol	`hover:bg-indigo-600`
`shadow`	Ombre portée	`shadow-inner`, `shadow-xl`

2.2 Champs de formulaire (inputs)

Créer des inputs stylés avec Tailwind, c’est rapide. Voici trois exemples bien différents pour capter le truc :

Exemple 1 – Moderne (simple et épuré)

<input class="border border-gray-300 rounded px-3 py-2 focus:border-indigo-500 focus:outline-none" placeholder="Nom complet">

Exemple 2 – Brutaliste (épais et massif)

<input class="border-4 border-black bg-white px-4 py-3 text-lg font-bold focus:bg-yellow-100 focus:outline-none" placeholder="TON NOM EN MAJUSCULES">

Exemple 3 – Skeuomorphe (effet relief)

<input class="border border-gray-400 rounded-lg px-4 py-2 shadow-inner bg-gray-200 focus:bg-white focus:shadow-lg focus:outline-none" placeholder="Pseudo 3D">

Tableau récap des classes clés pour les inputs :

Classe	Utilité	Exemple
`border`	Bordure	`border border-gray-300`
`rounded`	Coins arrondis	`rounded`, `rounded-lg`
`px-{n}`, `py-{n}`	Padding intérieur	`px-4 py-2`
`focus:`	Apparence quand sélectionné	`focus:border-indigo-500`
`shadow`	Ombre intérieure/extérieure	`shadow-inner`, `focus:shadow-lg`

2.3 Mise en page (Layouts : Flexbox & Grid)

Deux façons principales de placer des éléments facilement :

Exemple Flexbox – centrer horizontalement/verticalement

<div class="flex items-center justify-center h-48 bg-gray-100">
  <div class="bg-blue-500 text-white p-4 rounded">Je suis centré !</div>
</div>

Exemple Grid – grille simple 3 colonnes égales

<div class="grid grid-cols-3 gap-4">
  <div class="bg-green-300 p-4">Bloc 1</div>
  <div class="bg-green-400 p-4">Bloc 2</div>
  <div class="bg-green-500 p-4">Bloc 3</div>
</div>

Tableau récap Layout :

Classe	Utilité	Exemple
`flex`, `items-center`	Conteneur Flexbox + alignement	`flex items-center`
`justify-center`	Alignement horizontal (flex)	`justify-center`
`grid`, `grid-cols-{n}`	Créer une grille	`grid grid-cols-3`
`gap-{n}`	Espacement grille ou flex	`gap-4` (1rem)

2.4 Typographie basique

Voici comment contrôler facilement tes textes :

Exemples rapides :

<h1 class="text-3xl font-bold">Titre principal</h1>
<p class="text-gray-700 leading-relaxed">Paragraphe confortable à lire.</p>

<p class="text-2xl font-black uppercase text-black">BRUTALISTE AGRESSIF</p>

Tableau récap typo :

Classe	Utilité	Exemple
`text-{taille}`	Taille police	`text-xl`, `text-3xl`
`font-{poids}`	Graisse texte	`font-bold`, `font-black`
`leading-{esp}`	Hauteur ligne	`leading-relaxed`
`uppercase`	Texte majuscule	`uppercase`

2.5 Couleurs & arrière-plans

Exemple basique de coloration rapide :

<div class="bg-red-500 text-white p-4">Fond rouge, texte blanc</div>

<div class="bg-black text-yellow-300 p-4">Contraste brutaliste</div>

<div class="bg-gradient-to-b from-gray-100 to-gray-300 text-gray-900 p-4 shadow">Effet réaliste</div>

Tableau récap couleurs :

Classe	Utilité	Exemple
`bg-{couleur}`	Couleur arrière-plan	`bg-indigo-500`
`text-{couleur}`	Couleur texte	`text-white`
`bg-gradient-to-{dir}`	Dégradé	`bg-gradient-to-b` (vers bas)

Avec ça, tu as largement de quoi démarrer et tester plein de choses directement. Ensuite, on attaque le responsive et les variantes interactives.

3. Responsive Design en 2 minutes chrono 🥱

Rendre un design responsive, ça consiste juste à adapter ta page pour qu’elle soit agréable sur n'importe quel écran (du vieux smartphone claqué de ton pote jusqu'au gros écran gamer de riche). Avec Tailwind, t'as juste à ajouter des petits préfixes (sm:, md:, lg:, etc.) devant tes classes. C’est tout, fin du cours, tu peux rentrer chez toi (non).

⚡ Exemple responsive simple et rapide :

Ce layout est vertical sur mobile et devient horizontal sur tablette/desktop :

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-blue-200 p-4">Bloc 1</div>
  <div class="bg-blue-300 p-4">Bloc 2</div>
  <div class="bg-blue-400 p-4">Bloc 3</div>
</div>

Sur mobile :

Les blocs sont empilés verticalement grâce à flex-col.

Dès la taille md (tablette) :

Les blocs s'affichent côte à côte horizontalement avec md:flex-row.

📏 Tableau récap des Breakpoints :

Préfixe	Écrans concernés	Taille min
Aucun	Mobile	0px
`sm:`	Grands mobiles	640px
`md:`	Tablettes	768px
`lg:`	Ordinateurs	1024px
`xl:`	Grands écrans desktop	1280px
`2xl:`	Écrans XXL	1536px

🚩 Règle simple à retenir :

Définis d’abord le style mobile (sans préfixe).
Ajoute ensuite les variantes pour écrans plus grands (avec préfixes).

Exemple ultra-concret d’un texte qui s’adapte progressivement :

<p class="text-sm sm:text-base md:text-lg lg:text-xl">
  Texte qui grossit avec la taille de l'écran.
</p>

Sur mobile, texte petit (text-sm), puis ça augmente progressivement.

Allez, on continue avec les variantes interactives avant que tu décroches complètement (ง'̀-'́)ง 🫠

4. Variantes d'état (hover, focus, disabled...) 💅

Tailwind CSS gère les états interactifs sans que t’aies à écrire du CSS séparé. Tu mets juste des préfixes (hover:, focus:, disabled:...) devant tes classes pour gérer les interactions en 2 secondes. Pas mal, hein ?

🚨 Exemple interactif ultra-simple :

Voici un bouton qui réagit joliment au survol et à la sélection :

<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:ring-4 focus:ring-green-200 focus:outline-none transition">
  Clique-moi stp
</button>

Au survol (hover:), il devient plus foncé (bg-green-600).
Au focus (clic ou sélection clavier), il affiche un petit anneau clair (focus:ring-4 focus:ring-green-200).

🚧 Exemple de bouton désactivé :

<button class="bg-gray-400 text-gray-700 px-4 py-2 rounded cursor-not-allowed opacity-50" disabled>
  Bouton désactivé
</button>

Avec disabled:, tu peux gérer facilement le style de boutons inactifs (ici, rendu grisé avec opacity-50 et curseur barré).

📌 Tableau récap des variantes utiles :

Variante	Utilité	Exemple
`hover:`	Au survol souris	`hover:bg-blue-600`
`focus:`	Lorsque sélectionné (clic, clavier)	`focus:ring-2`, `focus:outline-none`
`active:`	Pendant clic	`active:scale-95`
`disabled:`	Quand élément désactivé	`disabled:opacity-50`

💡 Bonus : combiner variantes responsive & interactives !

Oui, ça marche aussi :

<button class="bg-red-500 sm:hover:bg-red-700 md:hover:bg-red-800 transition">
  Je change selon la taille et l’interaction !
</button>

Sur mobile : Rouge classique.
À partir de sm (tablette), rouge foncé au survol.
À partir de md (grand écran), encore plus foncé au survol.

Voilà, t’as les bases solides pour coder du style interactif sans galérer dans tes CSS. Maintenant, au boulot !

Sources :

https://v3.tailwindcss.com/

TailwindCSS

Tailwind CSS v3 – Bases & Exemples Pratiques

1. À propos de Tailwind CSS#

Exemple concret rapide :#

2. Les bases incontournables#

2.1 Boutons#

Exemple 1 – Moderne (flat, minimaliste)#

Exemple 2 – Brutaliste (contrastes forts, style agressif)#

Exemple 3 – Skeuomorphisme (effet réaliste avec ombres et relief)#

2.2 Champs de formulaire (inputs)#

Exemple 1 – Moderne (simple et épuré)#

Exemple 2 – Brutaliste (épais et massif)#

Exemple 3 – Skeuomorphe (effet relief)#

2.3 Mise en page (Layouts : Flexbox & Grid)#

Exemple Flexbox – centrer horizontalement/verticalement#

Exemple Grid – grille simple 3 colonnes égales#

2.4 Typographie basique#

Exemples rapides :#

2.5 Couleurs & arrière-plans#

3. Responsive Design en 2 minutes chrono 🥱#

⚡ Exemple responsive simple et rapide :#

📏 Tableau récap des Breakpoints :#

🚩 Règle simple à retenir :#

4. Variantes d'état (hover, focus, disabled...) 💅#

🚨 Exemple interactif ultra-simple :#

🚧 Exemple de bouton désactivé :#

📌 Tableau récap des variantes utiles :#

💡 Bonus : combiner variantes responsive & interactives !#

Sources :#