Passer au contenu
Cours Tailwind CSS Complet : Apprendre Tailwind de Zéro (2026)admin93612026-02-15T11:54:54+01:00
class=« p-6 »>padding: 1.5rem (24px)
class=« p-8 »>padding: 2rem (32px)
class=« pt-4 »>padding-top
class=« px-6 »>padding horizontal (left + right)
class=« my-8 »>margin vertical (top + bottom)
class=« mb-4 »>margin-bottom
class=« mx-auto »>Centré horizontalement
class=« -mt-4 »>margin-top: -1rem
class=« space-y-4 »>
Espacement vertical de 1rem entre chaque enfant
Deuxième paragraphe
📐 Width et height
class=« w-1/2 »>50%
class=« w-64 »>16rem (256px)
class=« w-screen »>100vw
class=« max-w-md »>max-width: 28rem
class=« max-w-4xl »>max-width: 56rem
class=« min-w-0 »>min-width: 0
class=« h-screen »>100vh
class=« h-full »>100%
class=« min-h-screen »>min-height: 100vh
class=« size-10 »>w-10 h-10 (2.5rem)📦 Flex layout
class=« flex gap-4 »>
Item 1
Item 2
Item 3
class=« flex flex-col gap-4 »>…
class=« flex items-center justify-center h-screen »>
Centré !
class=« flex items-center justify-between px-6 py-4 »>
Logo
class=« flex gap-6 »>
href=« # »>Accueil
href=« # »>À propos
href=« # »>Contact
class=« flex flex-wrap gap-4 »>…
class=« flex »>
class=« w-64 shrink-0 »>Sidebar fixe
class=« flex-1 »>Contenu (prend le reste)
🔲 CSS Grid avec Tailwind
class=« grid grid-cols-3 gap-4 »>
1
2
3
class=« grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 »>
class=« grid grid-cols-[250px_1fr] gap-4 »>
Contenu flexible
class=« grid grid-cols-4 gap-4 »>
class=« col-span-2 »>2 colonnes
1
1
class=« col-span-4 »>Toute la largeur
class=« grid place-items-center h-screen »>
Centré dans la page
📱 Breakpoints (mobile-first)
class= »
p-4
md:p-8
text-sm
md:text-base
lg:text-lg
flex flex-col
md:flex-row
gap-4
md:gap-8
« >
class=« w-full md:w-1/3 »>Sidebar
class=« w-full md:w-2/3 »>Contenu
class=« hidden md:block »>Visible desktop seulement
class=« md:hidden »>Visible mobile seulementMobile-first : les classes sans préfixe s'appliquent à TOUS les écrans. Les préfixes (md:, lg:) s'appliquent à partir de ce breakpoint. Pensez toujours mobile d'abord, puis ajoutez les adaptations desktop.
🌙 Dark mode
class=« bg-white dark:bg-gray-900 »>
class=« text-gray-900 dark:text-white »>Titre
class=« text-gray-600 dark:text-gray-400 »>Texte
class=« bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 »>
Card
: –>
/* app.css — activer le mode selector */
@import « tailwindcss »;
@custom-variant dark (&:where(.dark, .dark *));
document.documentElement.classList.toggle('dark')
✨ États et transitions
class= »
bg-blue-600 text-white px-6 py-3 rounded-lg
hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
active:bg-blue-800
transition-colors duration-200
« >
Cliquer
class=« transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl »>
Card avec animation au hover
class= »
border border-gray-300
focus:border-blue-500 focus:ring-1 focus:ring-blue-500
placeholder:text-gray-400
disabled:opacity-50 disabled:cursor-not-allowed
« />
class=« group cursor-pointer »>
class=« group-hover:text-blue-600 transition-colors »>Titre
class=« group-hover:text-gray-900 »>Texte
🎬 Animations intégrées
class=« animate-ping »>•
class=« animate-pulse »>…
class=« animate-bounce »>↓
class=« animate-pulse space-y-4 »>
class=« h-4 bg-gray-200 rounded w-3/4 »>
class=« h-4 bg-gray-200 rounded w-1/2 »>
class=« h-4 bg-gray-200 rounded w-5/6 »>
🃏 Card
class=« max-w-sm rounded-xl bg-white shadow-lg overflow-hidden »>
class=« w-full h-48 object-cover » src=« photo.jpg » alt=« » />
class=« p-6 »>
class=« text-xl font-bold text-gray-900 »>Titre de la card
class=« mt-2 text-gray-600 »>Description courte du contenu.
class=« mt-4 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors »>
En savoir plus
🧭 Navbar responsive
class=« bg-white shadow-sm border-b »>
class=« max-w-6xl mx-auto px-4 flex items-center justify-between h-16 »>
href=« / » class=« text-xl font-bold text-blue-600 »>Logo
class=« hidden md:flex items-center gap-8 »>
href=« # » class=« text-gray-700 hover:text-blue-600 transition-colors »>Accueil
href=« # » class=« text-gray-700 hover:text-blue-600 transition-colors »>Blog
href=« # » class=« bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 »>Contact
📝 Formulaire
class=« max-w-md mx-auto space-y-4 »>
class=« block text-sm font-medium text-gray-700 mb-1 »>Email
type=« email » class= »
w-full px-4 py-2 border border-gray-300 rounded-lg
focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none
placeholder:text-gray-400
« placeholder=« vous@exemple.com » />
class=« w-full bg-blue-600 text-white py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors »>
Envoyer
🎛️ Configuration Tailwind v4
/* app.css — personnalisation avec @theme */
@import « tailwindcss »;
@theme
class=« bg-brand text-white font-sans »>Custom
🔧 Valeurs arbitraires et @apply
class=« w-[327px] h-[200px] bg-[#1a1a2e] text-[13px] p-[18px] »>
Valeurs exactes entre crochets
class=« [mask-type:luminance] [–custom-var:12px] »>
/* @apply — extraire des classes en CSS (à utiliser avec parcimonie) */
@layer components
@apply avec modération. L'intérêt de Tailwind est d'éviter d'écrire du CSS. Si vous utilisez @apply partout, vous recréez le CSS classique avec des étapes supplémentaires. Réservez-le aux patterns très répétés (boutons, inputs). Pour le reste, utilisez des composants (React/Vue).
🔌 Plugins officiels
| Plugin | Usage |
|---|
| @tailwindcss/typography | Prose stylisée pour contenu riche (articles, markdown) |
| @tailwindcss/forms | Reset et base styling pour les formulaires |
| @tailwindcss/container-queries | Container queries (@container) |
/* app.css */
@import « tailwindcss »;
@plugin « @tailwindcss/typography »;
class=« prose lg:prose-xl max-w-none »>
Mon article
Le texte est automatiquement stylisé…
Les blocs de code aussi
🧩 UI Libraries compatibles
| Librairie | Framework | Description |
|---|
| shadcn/ui | React | Composants copiables, entièrement personnalisables |
| Radix Vue | Vue | Primitives accessibles unstyled |
| Headless UI | React / Vue | Composants unstyled par les créateurs de Tailwind |
| DaisyUI | Agnostique | Composants avec classes sémantiques (btn, card) |
| Flowbite | Agnostique | Composants prêts à l'emploi |
📋 Ordre des classes recommandé
class= »
flex items-center gap-4
w-full max-w-lg
p-6
bg-white
border border-gray-200
rounded-xl shadow-md
text-gray-900 text-sm
hover:shadow-lg
dark:bg-gray-800
md:p-8 lg:max-w-xl
transition-shadow duration-200
« >
✅ Bonnes pratiques
✅ À FAIRE
• Mobile-first (sans préfixe = mobile)
• prettier-plugin-tailwindcss
• Composants pour réutiliser (React/Vue)
• @theme pour le design system
• dark: pour le dark mode
• group-hover: pour les interactions
• Classes sémantiques si très répétées
• Tailwind IntelliSense (VSCode)
• @tailwindcss/typography pour le contenu
❌ À ÉVITER
• @apply partout (récrée du CSS)
• Classes inutiles (reset déjà fait)
• Ignorer le responsive
• Valeurs arbitraires quand le scale suffit
• !important (! en Tailwind)
• Mélanger CSS custom et Tailwind
• Oublier les focus states (a11y)
• Lignes de classes de 200 caractères
• Ignorer Prettier plugin
🧠 Quiz
Tailwind est-il bon pour le SEO et la performance ?
Oui, excellent. Tailwind génère uniquement le CSS des classes utilisées (tree-shaking), ce qui produit un bundle CSS beaucoup plus petit qu'un framework classique (souvent < 10 KB gzippé). Pas d'impact sur le SEO — le HTML reste sémantique, seules les classes changent.
Tailwind v4 vs v3 — quelles différences ?
v4 : configuration dans le CSS (@theme au lieu de tailwind.config.js), @plugin dans le CSS, plus rapide (nouveau moteur Oxide), pas de purge à configurer, détection auto du contenu, nouvelles fonctionnalités (container queries, 3D transforms). Migration quasi automatique avec @tailwindcss/upgrade.
