Aller au contenu principal

Module Tailwind.3 – Classes utilitaires

Objectif​

Maîtriser toutes les classes utilitaires Tailwind : layout, spacing, typography, colors pour styler rapidement avec Tailwind.

Théorie​

Layout​

Display​

<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline-flex</div>
<div class="grid">Grid</div>
<div class="hidden">Caché</div>

Position​

<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
<div class="sticky">Sticky</div>

Positionnement :

<div class="top-0">Top 0</div>
<div class="right-0">Right 0</div>
<div class="bottom-0">Bottom 0</div>
<div class="left-0">Left 0</div>
<div class="inset-0">Tous les côtés 0</div>

Flexbox​

Direction :

<div class="flex-row">Row</div>
<div class="flex-row-reverse">Row inversé</div>
<div class="flex-col">Column</div>
<div class="flex-col-reverse">Column inversé</div>

Justify :

<div class="justify-start">Start</div>
<div class="justify-end">End</div>
<div class="justify-center">Center</div>
<div class="justify-between">Between</div>
<div class="justify-around">Around</div>
<div class="justify-evenly">Evenly</div>

Align :

<div class="items-start">Start</div>
<div class="items-end">End</div>
<div class="items-center">Center</div>
<div class="items-baseline">Baseline</div>
<div class="items-stretch">Stretch</div>

Wrap :

<div class="flex-wrap">Wrap</div>
<div class="flex-nowrap">No wrap</div>
<div class="flex-wrap-reverse">Wrap reverse</div>

Gap :

<div class="gap-1">Gap 0.25rem</div>
<div class="gap-2">Gap 0.5rem</div>
<div class="gap-4">Gap 1rem</div>
<div class="gap-8">Gap 2rem</div>

Grid​

Colonnes :

<div class="grid-cols-1">1 colonne</div>
<div class="grid-cols-2">2 colonnes</div>
<div class="grid-cols-3">3 colonnes</div>
<div class="grid-cols-12">12 colonnes</div>

Rows :

<div class="grid-rows-1">1 ligne</div>
<div class="grid-rows-3">3 lignes</div>

Span :

<div class="col-span-1">1 colonne</div>
<div class="col-span-2">2 colonnes</div>
<div class="col-span-full">Toutes les colonnes</div>

Spacing​

Margin :

<div class="m-0">Margin 0</div>
<div class="m-1">Margin 0.25rem</div>
<div class="m-2">Margin 0.5rem</div>
<div class="m-4">Margin 1rem</div>
<div class="m-8">Margin 2rem</div>
<div class="m-auto">Margin auto</div>

<div class="mt-4">Margin top</div>
<div class="mr-4">Margin right</div>
<div class="mb-4">Margin bottom</div>
<div class="ml-4">Margin left</div>
<div class="mx-4">Margin horizontal</div>
<div class="my-4">Margin vertical</div>

Padding :

<div class="p-0">Padding 0</div>
<div class="p-1">Padding 0.25rem</div>
<div class="p-2">Padding 0.5rem</div>
<div class="p-4">Padding 1rem</div>
<div class="p-8">Padding 2rem</div>

<div class="pt-4">Padding top</div>
<div class="px-4">Padding horizontal</div>
<div class="py-4">Padding vertical</div>

Valeurs :

  • 0 : 0
  • 1 : 0.25rem (4px)
  • 2 : 0.5rem (8px)
  • 3 : 0.75rem (12px)
  • 4 : 1rem (16px)
  • 5 : 1.25rem (20px)
  • 6 : 1.5rem (24px)
  • 8 : 2rem (32px)
  • 10 : 2.5rem (40px)
  • 12 : 3rem (48px)
  • 16 : 4rem (64px)
  • 20 : 5rem (80px)
  • 24 : 6rem (96px)

Typography​

Tailles​

<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2xl</p>
<p class="text-3xl">3xl</p>
<p class="text-4xl">4xl</p>
<p class="text-5xl">5xl</p>
<p class="text-6xl">6xl</p>
<p class="text-7xl">7xl</p>
<p class="text-8xl">8xl</p>
<p class="text-9xl">9xl</p>

Weight​

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra light (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semi-bold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra bold (800)</p>
<p class="font-black">Black (900)</p>

Alignement​

<p class="text-left">Gauche</p>
<p class="text-center">Centre</p>
<p class="text-right">Droite</p>
<p class="text-justify">Justifié</p>

Transformation​

<p class="uppercase">MAJUSCULES</p>
<p class="lowercase">minuscules</p>
<p class="capitalize">Première Lettre Majuscule</p>
<p class="normal-case">Normal</p>

Décoration​

<p class="underline">Souligné</p>
<p class="overline">Ligne au-dessus</p>
<p class="line-through">Barré</p>
<p class="no-underline">Pas de décoration</p>

Colors​

Couleurs de texte​

<p class="text-black">Noir</p>
<p class="text-white">Blanc</p>
<p class="text-gray-500">Gris</p>
<p class="text-red-500">Rouge</p>
<p class="text-blue-500">Bleu</p>
<p class="text-green-500">Vert</p>
<p class="text-yellow-500">Jaune</p>
<p class="text-purple-500">Violet</p>
<p class="text-pink-500">Rose</p>
<p class="text-indigo-500">Indigo</p>

Nuances :

  • 50 : Très clair
  • 100 : Clair
  • 200 : ...
  • 500 : Moyen (défaut)
  • 900 : Très foncé

Couleurs de fond​

<div class="bg-white">Fond blanc</div>
<div class="bg-black">Fond noir</div>
<div class="bg-gray-100">Fond gris clair</div>
<div class="bg-blue-500">Fond bleu</div>
<div class="bg-red-500">Fond rouge</div>
<div class="bg-green-500">Fond vert</div>

Opacité​

<div class="bg-blue-500 bg-opacity-50">50% opaque</div>
<div class="bg-blue-500 bg-opacity-75">75% opaque</div>
<div class="text-blue-500 text-opacity-50">Texte 50% opaque</div>

Borders​

<div class="border">Bordure</div>
<div class="border-2">Bordure 2px</div>
<div class="border-4">Bordure 4px</div>
<div class="border-t">Bordure top</div>
<div class="border-b">Bordure bottom</div>
<div class="border-blue-500">Bordure bleue</div>
<div class="rounded">Arrondi</div>
<div class="rounded-lg">Arrondi large</div>
<div class="rounded-full">Cercle</div>

Shadows​

<div class="shadow-sm">Petite ombre</div>
<div class="shadow">Ombre normale</div>
<div class="shadow-md">Ombre moyenne</div>
<div class="shadow-lg">Grande ombre</div>
<div class="shadow-xl">Très grande ombre</div>
<div class="shadow-2xl">Ombre 2xl</div>
<div class="shadow-none">Pas d'ombre</div>

Width & Height​

<div class="w-0">Width 0</div>
<div class="w-1/4">Width 25%</div>
<div class="w-1/2">Width 50%</div>
<div class="w-3/4">Width 75%</div>
<div class="w-full">Width 100%</div>
<div class="w-screen">Width viewport</div>
<div class="w-auto">Width auto</div>

<div class="h-0">Height 0</div>
<div class="h-1/4">Height 25%</div>
<div class="h-full">Height 100%</div>
<div class="h-screen">Height viewport</div>

Exercices guidés​

Exercice 1 : Layout​

Créez un layout avec :

  • Flexbox pour centrage
  • Grid pour grille
  • Position pour éléments

Exercice 2 : Spacing​

Utilisez spacing :

  • Margins variés
  • Paddings variés
  • Centrage avec mx-auto

Exercice 3 : Typography​

Testez la typographie :

  • Tailles variées
  • Weights variés
  • Alignement
  • Transformation

Exercice 4 : Colors​

Testez les couleurs :

  • Texte coloré
  • Fonds colorés
  • Opacité
  • Nuances

Exercice 5 : Combinaisons​

Créez des composants avec :

  • Combinaison de plusieurs classes
  • Layout + spacing + colors
  • Design professionnel

❌ Erreurs fréquentes​

Erreur 1 : Confondre m et p​

❌ Mauvais :

<div class="m-4">Pense que c'est padding</div>

✅ Bon :

<div class="p-4">Padding</div>
<div class="m-4">Margin</div>

Pourquoi : m = margin, p = padding.

Erreur 2 : Classes dans le mauvais ordre​

❌ Mauvais :

<div class="text-red-500 text-blue-500">Quelle couleur ?</div>

✅ Bon :

<div class="text-blue-500">Bleu (dernière classe gagne)</div>

Pourquoi : Ordre des classes = dernière gagne.

Erreur 3 : Oublier les préfixes​

❌ Mauvais :

<div class="flex justify-center">Pense que c'est responsive</div>

✅ Bon :

<div class="flex md:justify-center">Responsive</div>

Pourquoi : Préfixes pour responsive (voir module 4).

Erreur 4 : Trop de classes​

❌ Mauvais :

<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400 disabled:cursor-not-allowed">
    <!-- 10+ classes, créer un composant serait mieux -->
</button>

✅ Bon :

<!-- Si réutilisé, extraire en composant -->
<button class="btn-primary">Cliquer</button>

Pourquoi : Si réutilisé, créer un composant.

Erreur 5 : Valeurs arbitraires partout​

❌ Mauvais :

<div class="w-[347px] h-[289px]">Partout</div>

✅ Bon :

<!-- Configurer dans tailwind.config.js si réutilisé -->
<div class="w-custom h-custom">Configuré</div>

Pourquoi : Configuration = cohérence.

🚀 Mini-projet​

Mission : Créer une page avec classes utilitaires uniquement

Créez une page complète avec :

Layout :

  • Header avec flexbox
  • Hero section
  • Grille de cards
  • Footer

Styling :

  • Spacing cohérent
  • Typographie hiérarchique
  • Couleurs harmonieuses
  • Shadows et borders

Défi :

  • Utiliser uniquement les classes Tailwind
  • Pas de CSS personnalisé
  • Design professionnel

Critères :

  • ✅ Classes utilitaires uniquement
  • ✅ Layout responsive (base)
  • ✅ Spacing cohérent
  • ✅ Typographie professionnelle
  • ✅ Design harmonieux

Objectif : Maîtriser toutes les classes utilitaires Tailwind pour styler rapidement.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les classes utilitaires Tailwind et créez des layouts avec les classes uniquement.