Vous entendez parler de Tailwind CSS partout mais vous ne savez pas par où commencer ? Vous cherchez un tutoriel simple pour créer votre premier composant ? Vous voulez comprendre ce que « utility-first » veut dire concrètement ?
Ce guide vous montre pas à pas comment débuter avec Tailwind CSS en 2026, de l’installation à la création d’un composant responsive. You are ready to build something concrete.
Comprendre la Magie de Tailwind : l’Approche « Utility-First »
Oubliez la façon traditionnelle d’écrire du CSS. D’habitude, vous créez une classe comme `.card` dans un fichier CSS, puis vous listez toutes ses propriétés (couleur, taille, ombre, etc.).
Tailwind est un utility-first framework. Cela veut dire qu’il vous donne des milliers de petites classes qui ne font qu’une seule chose. Par exemple, `bg-white` met un fond blanc, `p-4` ajoute du padding et `shadow-md` applique une ombre. Vous combinez ces classes directement dans votre fichier HTML pour construire votre design.
Exemple concret : Un bouton simple
Avant (CSS classique) :
<!-- HTML -->
<button class="btn-primaire">Cliquez ici</button>
<!-- CSS -->
.btn-primaire {
background-color: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 4px;
}Après (Avec Tailwind CSS) :
<!-- Juste du HTML -->
<button class="bg-blue-500 text-white py-2 px-4 rounded">
Cliquez ici
</button>Vous voyez ? Tout le style est dans le HTML. C’est plus rapide pour le prototypage et vous n’avez plus besoin de trouver des noms pour vos classes. What you see is what you get.
Installation de Tailwind CSS : La Méthode Express pour Démarrer
Il y a deux façons principales de commencer à utiliser Tailwind. Le choix dépend de votre projet.
Méthode 1 : Le CDN (pour tester en 30 secondes)
C’est la méthode la plus rapide pour essayer Tailwind. Elle est parfaite pour un petit test ou pour l’ajouter à un projet existant sans installation complexe. Il suffit de coller une balise dans votre HTML.
Attention, cette méthode via CDN ne permet pas de personnaliser le framework ni d’utiliser toutes ses fonctionnalités avancées. Mais for building a quick demo, it’s perfect.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Méthode 2 : Avec npm et Vite (la vraie méthode de pro)
Pour tout projet sérieux, c’est la méthode à utiliser. Elle vous donne accès à toutes les fonctionnalités de Tailwind, comme la personnalisation de votre design system et l’optimisation de la taille de votre fichier CSS final.
Voici les étapes pour un nouveau projet avec Vite, un outil de build moderne et rapide :
- Étape 1 : Créez votre projet Vite.
npm create vite@latest mon-projet-tailwind -- --template vanillacd mon-projet-tailwind
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pCette commande crée deux fichiers importants : `tailwind.config.js` et `postcss.config.js`. C’est dans le premier que vous configurerez Tailwind. Pour plus de détails, la documentation officielle de Tailwind CSS est très claire.
Tutoriel : Créons Ensemble Votre Première Carte Produit
Passons à la pratique. Nous allons construire une carte produit simple et responsive. C’est un des components les plus courants sur n’importe quel site.
Ouvrez votre fichier `index.html` et suivez les étapes. Nous allons ajouter des classes petit à petit pour voir la carte prendre forme.
1. La structure de base
On commence avec un conteneur principal. Pour le centrer et lui donner une largeur maximale, on utilise les classes `max-w-sm`, `mx-auto`. On ajoute un fond `bg-white`, des coins `rounded` et une ombre `shadow-md`.
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
<!-- Image, titre, etc. viendront ici -->
</div>2. L’image du produit
On ajoute une image. Pour qu’elle prenne toute la largeur (`w-full`), ait une hauteur fixe (`h-48`) et soit bien cadrée (`object-cover`), on utilise ces classes utilitaires.
<img class="w-full h-48 object-cover" src="https://source.unsplash.com/random/400x300" alt="Image du produit">3. Le contenu textuel
Dans un `div` avec du padding (`p-6`), on ajoute un titre et une description. Pour le titre, on utilise des classes de typographie comme `font-bold` et `text-xl`. Pour la description, on utilise une couleur de texte plus douce comme `text-gray-700`.
<div class="p-6">
<h2 class="font-bold text-xl mb-2">Titre de la carte</h2>
<p class="text-gray-700 text-base">
Voici une petite description pour le produit présenté sur cette carte.
</p>
</div>4. Le bouton d’action
Enfin, on ajoute un bouton. On le stylise avec une couleur de fond (`bg-blue-500`), un effet au survol (`hover:bg-blue-700`), du texte blanc (`text-white`) et du padding (`py-2 px-4`).
<div class="px-6 pt-4 pb-2">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Acheter
</button>
</div>Code final de la carte produit :
Voici le code complet à copier/coller. En quelques lignes de HTML, vous avez une carte stylisée, propre et facile à modifier. That is the power of Tailwind.
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden my-10">
<img class="w-full h-48 object-cover" src="https://source.unsplash.com/random/400x300" alt="Image du produit">
<div class="p-6">
<h2 class="font-bold text-xl mb-2">Titre de la carte</h2>
<p class="text-gray-700 text-base">
Voici une petite description pour le produit présenté sur cette carte.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Acheter
</button>
</div>
</div>Tailwind CSS vs Bootstrap : Lequel Choisir pour Votre Projet en 2026 ?
C’est une question fréquente pour quiconque démarre un nouveau projet. Bootstrap est un framework basé sur des composants prêts à l’emploi (like ready made components) alors que Tailwind vous donne des outils pour construire les vôtres. Il n’y a pas de meilleur choix, juste un outil plus adapté à votre besoin.
Ce tableau vous aide à visualiser les différences clés pour vous décider.
| Caractéristique | Tailwind CSS | Bootstrap |
|---|---|---|
| Approche | Utility-First. Vous construisez le design à partir de zéro avec des classes atomiques. | Component-Based. Vous utilisez des composants pré-stylisés comme `.card` ou `.navbar`. |
| Personnalisation | Totale. Votre design est unique. Pas deux sites faits avec Tailwind ne se ressemblent. | Limitée. Les sites Bootstrap ont souvent un « look and feel » similaire. |
| Courbe d’apprentissage | Plus forte au début. Il faut apprendre les noms des classes utilitaires. | Très rapide. Vous pouvez assembler une page fonctionnelle en quelques minutes. |
| Design | Permet un design unique et sur mesure. Vous n’êtes pas contraint par un style prédéfini. | Offre un design standardisé et cohérent, idéal pour le prototypage rapide. |
| Taille des fichiers | Le fichier final est très petit grâce à PurgeCSS, qui élimine les classes non utilisées. | Le fichier CSS peut être plus lourd car il inclut les styles de tous les composants, même si vous ne les utilisez pas. |
En résumé : choisissez Tailwind pour la flexibilité et un design 100% personnalisé. Choisissez Bootstrap pour la rapidité de prototypage et si vous avez besoin d’une interface d’administration standard rapidement.
Foire Aux Questions (FAQ) sur Tailwind
Voici des réponses aux questions que les débutants se posent souvent sur Tailwind.
Est-ce que Tailwind rend mon HTML illisible ?
Au début, une longue liste de classes peut sembler confuse. Mais avec l’habitude, on apprend à lire ces classes très vite. Pour les parties répétitives, il est conseillé de créer des composants réutilisables (avec React, Vue, Blade, etc.) pour ne pas avoir à réécrire les mêmes classes partout.
Comment gérer les styles réutilisables (composants) ?
La meilleure approche est de créer des abstractions au niveau de vos templates (composants de framework JS, partials, etc.). Si vous avez vraiment besoin de créer une classe CSS, Tailwind vous permet d’utiliser la directive `@apply` dans votre fichier CSS pour regrouper des classes utilitaires. C’est pratique, mais à utiliser avec modération pour ne pas retomber dans les travers du CSS traditionnel.
La taille du fichier CSS final est-elle énorme ?
Non, au contraire. En développement, le fichier est gros car il contient toutes les classes possibles. Mais en production, le compilateur Just-In-Time (JIT) et des outils comme PurgeCSS scannent vos fichiers HTML, JS, etc. Ils ne gardent que les classes que vous utilisez réellement. Le fichier CSS final est souvent minuscule, généralement sous les 10-15 Ko. This will help you get started building amazing layouts with tailwind and your site will be very fast.
