Tailwind CSS – Classes et configuration

Guide de référence complet pour Tailwind CSS : classes utilitaires, responsive design, dark mode, configuration personnalisée et bonnes pratiques.

Table des matières

1. Installation et configuration
2. Layout et positionnement
3. Spacing (marges et padding)
4. Typographie
5. Couleurs et backgrounds
6. Borders et effets
7. Flexbox et Grid
8. Responsive design
9. Dark mode
10. Animations et transitions
11. Configuration personnalisée
12. Plugins et extensions

---

Installation et configuration

Installation avec npm

# Installer Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# Initialiser la configuration
npx tailwindcss init

# Avec PostCSS config
npx tailwindcss init -p

Configuration de base (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./pages/**/*.{html,js,jsx,ts,tsx}",
    "./components/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Fichier CSS principal

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Vos styles personnalisés ici */
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
  }
}

CDN (développement uniquement)

<script src="https://cdn.tailwindcss.com"></script>

---

Layout et positionnement

Display

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

<!-- Table -->
<div class="table">Table</div>
<div class="table-row">Row</div>
<div class="table-cell">Cell</div>

Position

<!-- Static, Relative, Absolute, Fixed, Sticky -->
<div class="static">Static (défaut)</div>
<div class="relative">Relative</div>
<div class="absolute top-0 right-0">Absolute</div>
<div class="fixed bottom-4 right-4">Fixed</div>
<div class="sticky top-0">Sticky</div>

<!-- Inset (top, right, bottom, left) -->
<div class="absolute inset-0">Full</div>
<div class="absolute inset-x-0">Horizontal</div>
<div class="absolute inset-y-0">Vertical</div>
<div class="absolute top-4 right-4 bottom-4 left-4">Custom</div>

<!-- Z-index -->
<div class="z-0">z-0</div>
<div class="z-10">z-10</div>
<div class="z-20">z-20</div>
<div class="z-30">z-30</div>
<div class="z-40">z-40</div>
<div class="z-50">z-50</div>
<div class="z-auto">z-auto</div>

Width et Height

<!-- Width fixe -->
<div class="w-0">w-0 (0px)</div>
<div class="w-px">w-px (1px)</div>
<div class="w-0.5">w-0.5 (2px/0.125rem)</div>
<div class="w-1">w-1 (4px/0.25rem)</div>
<div class="w-2">w-2 (8px)</div>
<div class="w-4">w-4 (16px)</div>
<div class="w-8">w-8 (32px)</div>
<div class="w-16">w-16 (64px)</div>
<div class="w-32">w-32 (128px)</div>
<div class="w-64">w-64 (256px)</div>

<!-- Width en fractions -->
<div class="w-1/2">w-1/2 (50%)</div>
<div class="w-1/3">w-1/3 (33.333%)</div>
<div class="w-2/3">w-2/3 (66.666%)</div>
<div class="w-1/4">w-1/4 (25%)</div>
<div class="w-3/4">w-3/4 (75%)</div>
<div class="w-full">w-full (100%)</div>

<!-- Width relative à l'écran -->
<div class="w-screen">w-screen (100vw)</div>
<div class="w-svw">w-svw (100svw)</div>
<div class="w-lvw">w-lvw (100lvw)</div>
<div class="w-dvw">w-dvw (100dvw)</div>

<!-- Min/Max width -->
<div class="min-w-0">min-w-0</div>
<div class="min-w-full">min-w-full</div>
<div class="max-w-xs">max-w-xs (320px)</div>
<div class="max-w-sm">max-w-sm (384px)</div>
<div class="max-w-md">max-w-md (448px)</div>
<div class="max-w-lg">max-w-lg (512px)</div>
<div class="max-w-xl">max-w-xl (576px)</div>
<div class="max-w-2xl">max-w-2xl (672px)</div>
<div class="max-w-4xl">max-w-4xl (896px)</div>
<div class="max-w-7xl">max-w-7xl (1280px)</div>
<div class="max-w-full">max-w-full</div>

<!-- Height (même logique que width) -->
<div class="h-64">h-64</div>
<div class="h-screen">h-screen (100vh)</div>
<div class="min-h-screen">min-h-screen</div>

Overflow

<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-visible">Visible</div>
<div class="overflow-scroll">Scroll</div>
<div class="overflow-x-auto">X-Auto</div>
<div class="overflow-y-auto">Y-Auto</div>

Object Fit et Position

<!-- Object fit pour images/vidéos -->
<img class="object-contain" src="..." />
<img class="object-cover" src="..." />
<img class="object-fill" src="..." />
<img class="object-none" src="..." />
<img class="object-scale-down" src="..." />

<!-- Object position -->
<img class="object-center" src="..." />
<img class="object-top" src="..." />
<img class="object-bottom" src="..." />
<img class="object-left-top" src="..." />

---

Spacing (marges et padding)

Échelle de spacing

Classe	Valeur	Pixels
0	0	0px
px	1px	1px
0.5	0.125rem	2px
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
32	8rem	128px
40	10rem	160px
48	12rem	192px
56	14rem	224px
64	16rem	256px

Margin

<!-- Tous les côtés -->
<div class="m-4">Margin 4 (16px) tous côtés</div>

<!-- Axes -->
<div class="mx-4">Margin horizontal (left + right)</div>
<div class="my-4">Margin vertical (top + bottom)</div>

<!-- Côtés individuels -->
<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>

<!-- Marges négatives -->
<div class="-m-4">Negative margin</div>
<div class="-mt-4">Negative margin top</div>

<!-- Margin auto (centrage) -->
<div class="mx-auto">Centré horizontalement</div>
<div class="ml-auto">Aligné à droite</div>

Padding

<!-- Tous les côtés -->
<div class="p-4">Padding 4 (16px) tous côtés</div>

<!-- Axes -->
<div class="px-4">Padding horizontal</div>
<div class="py-4">Padding vertical</div>

<!-- Côtés individuels -->
<div class="pt-4">Padding top</div>
<div class="pr-4">Padding right</div>
<div class="pb-4">Padding bottom</div>
<div class="pl-4">Padding left</div>

Space Between

<!-- Espacement entre enfants -->
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

---

Typographie

Font Family

<p class="font-sans">Sans-serif (défaut)</p>
<p class="font-serif">Serif</p>
<p class="font-mono">Monospace</p>

Font Size

<p class="text-xs">Extra small (0.75rem/12px)</p>
<p class="text-sm">Small (0.875rem/14px)</p>
<p class="text-base">Base (1rem/16px)</p>
<p class="text-lg">Large (1.125rem/18px)</p>
<p class="text-xl">Extra large (1.25rem/20px)</p>
<p class="text-2xl">2xl (1.5rem/24px)</p>
<p class="text-3xl">3xl (1.875rem/30px)</p>
<p class="text-4xl">4xl (2.25rem/36px)</p>
<p class="text-5xl">5xl (3rem/48px)</p>
<p class="text-6xl">6xl (3.75rem/60px)</p>
<p class="text-7xl">7xl (4.5rem/72px)</p>
<p class="text-8xl">8xl (6rem/96px)</p>
<p class="text-9xl">9xl (8rem/128px)</p>

Font Weight

<p class="font-thin">100</p>
<p class="font-extralight">200</p>
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>
<p class="font-extrabold">800</p>
<p class="font-black">900</p>

Text Alignment

<p class="text-left">Gauche</p>
<p class="text-center">Centré</p>
<p class="text-right">Droite</p>
<p class="text-justify">Justifié</p>
<p class="text-start">Start (RTL aware)</p>
<p class="text-end">End (RTL aware)</p>

Text Decoration

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

<!-- Decoration style -->
<p class="decoration-solid">Solid</p>
<p class="decoration-double">Double</p>
<p class="decoration-dotted">Pointillé</p>
<p class="decoration-dashed">Tirets</p>
<p class="decoration-wavy">Ondulé</p>

<!-- Decoration color -->
<p class="underline decoration-red-500">Rouge</p>
<p class="underline decoration-2">Épaisseur 2px</p>

Text Transform

<p class="uppercase">MAJUSCULES</p>
<p class="lowercase">minuscules</p>
<p class="capitalize">Capitalisé</p>
<p class="normal-case">Normal</p>

Line Height

<p class="leading-none">1</p>
<p class="leading-tight">1.25</p>
<p class="leading-snug">1.375</p>
<p class="leading-normal">1.5</p>
<p class="leading-relaxed">1.625</p>
<p class="leading-loose">2</p>
<p class="leading-3">0.75rem</p>
<p class="leading-10">2.5rem</p>

Letter Spacing

<p class="tracking-tighter">-0.05em</p>
<p class="tracking-tight">-0.025em</p>
<p class="tracking-normal">0</p>
<p class="tracking-wide">0.025em</p>
<p class="tracking-wider">0.05em</p>
<p class="tracking-widest">0.1em</p>

Text Overflow

<p class="truncate">Tronqué avec ellipsis</p>
<p class="text-ellipsis overflow-hidden">Ellipsis</p>
<p class="text-clip overflow-hidden">Clip</p>

<!-- Nombre de lignes -->
<p class="line-clamp-1">Une ligne max</p>
<p class="line-clamp-2">Deux lignes max</p>
<p class="line-clamp-3">Trois lignes max</p>

Text Indent et Alignment

<p class="indent-8">Indentation 32px</p>
<p class="align-baseline">Baseline</p>
<p class="align-top">Top</p>
<p class="align-middle">Middle</p>
<p class="align-bottom">Bottom</p>
<p class="align-text-top">Text top</p>
<p class="align-text-bottom">Text bottom</p>

---

Couleurs et backgrounds

Palette de couleurs

Tailwind inclut les couleurs suivantes (50-900) :

• slate, gray, zinc, neutral, stone
• red, orange, amber, yellow, lime, green, emerald, teal, cyan
• sky, blue, indigo, violet, purple, fuchsia, pink, rose

Text Colors

<p class="text-gray-500">Gris 500</p>
<p class="text-blue-600">Bleu 600</p>
<p class="text-red-500">Rouge 500</p>
<p class="text-green-600">Vert 600</p>

<!-- Opacité -->
<p class="text-blue-600/50">50% opacité</p>
<p class="text-blue-600/75">75% opacité</p>
<p class="text-blue-600/100">100% opacité</p>

Background Colors

<div class="bg-white">Blanc</div>
<div class="bg-black">Noir</div>
<div class="bg-gray-100">Gris clair</div>
<div class="bg-gray-900">Gris foncé</div>
<div class="bg-blue-500">Bleu</div>

<!-- Opacité -->
<div class="bg-blue-500/50">Bleu 50% opacité</div>

<!-- Transparent -->
<div class="bg-transparent">Transparent</div>

Gradients

<!-- Direction -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  Gauche à droite
</div>
<div class="bg-gradient-to-b from-blue-500 to-purple-500">
  Haut en bas
</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">
  Diagonal (top-right)
</div>

<!-- Avec couleur intermédiaire -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Trois couleurs
</div>

<!-- Toutes les directions -->
<!-- to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl -->

Background Image

<div class="bg-[url('/img/hero.jpg')]">Background image</div>
<div class="bg-none">Pas de background</div>

<!-- Position -->
<div class="bg-center">Centré</div>
<div class="bg-top">Haut</div>
<div class="bg-bottom">Bas</div>
<div class="bg-left">Gauche</div>
<div class="bg-right">Droite</div>

<!-- Size -->
<div class="bg-cover">Cover</div>
<div class="bg-contain">Contain</div>
<div class="bg-auto">Auto</div>

<!-- Repeat -->
<div class="bg-repeat">Repeat</div>
<div class="bg-no-repeat">No repeat</div>
<div class="bg-repeat-x">Repeat X</div>
<div class="bg-repeat-y">Repeat Y</div>

---

Borders et effets

Border Width

<div class="border">Border 1px tous côtés</div>
<div class="border-0">Pas de border</div>
<div class="border-2">Border 2px</div>
<div class="border-4">Border 4px</div>
<div class="border-8">Border 8px</div>

<!-- Côtés individuels -->
<div class="border-t">Top</div>
<div class="border-r">Right</div>
<div class="border-b">Bottom</div>
<div class="border-l">Left</div>
<div class="border-x">Left + Right</div>
<div class="border-y">Top + Bottom</div>

Border Color

<div class="border border-gray-300">Gris</div>
<div class="border border-blue-500">Bleu</div>
<div class="border border-red-500/50">Rouge 50% opacité</div>

Border Style

<div class="border border-solid">Solid</div>
<div class="border border-dashed">Dashed</div>
<div class="border border-dotted">Dotted</div>
<div class="border border-double">Double</div>
<div class="border border-none">None</div>

Border Radius

<div class="rounded">0.25rem</div>
<div class="rounded-md">0.375rem</div>
<div class="rounded-lg">0.5rem</div>
<div class="rounded-xl">0.75rem</div>
<div class="rounded-2xl">1rem</div>
<div class="rounded-3xl">1.5rem</div>
<div class="rounded-full">9999px (cercle)</div>

<!-- Coins individuels -->
<div class="rounded-t-lg">Top</div>
<div class="rounded-r-lg">Right</div>
<div class="rounded-b-lg">Bottom</div>
<div class="rounded-l-lg">Left</div>
<div class="rounded-tl-lg">Top-left</div>
<div class="rounded-tr-lg">Top-right</div>
<div class="rounded-br-lg">Bottom-right</div>
<div class="rounded-bl-lg">Bottom-left</div>

Box Shadow

<div class="shadow-sm">Petite ombre</div>
<div class="shadow">Ombre standard</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 maximale</div>
<div class="shadow-inner">Ombre intérieure</div>
<div class="shadow-none">Pas d'ombre</div>

<!-- Couleur d'ombre -->
<div class="shadow-lg shadow-blue-500/50">Ombre bleue</div>

Opacity

<div class="opacity-0">Invisible</div>
<div class="opacity-25">25%</div>
<div class="opacity-50">50%</div>
<div class="opacity-75">75%</div>
<div class="opacity-100">100%</div>

Outline

<button class="outline outline-2 outline-blue-500">Outline</button>
<button class="outline-none">Sans outline</button>
<button class="outline-dashed">Outline dashed</button>
<button class="outline-offset-2">Outline offset</button>

<!-- Focus visible -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
  Focus state
</button>

Ring (outline avec offset)

<button class="ring">Ring default</button>
<button class="ring-2">Ring 2px</button>
<button class="ring-4">Ring 4px</button>
<button class="ring-blue-500">Ring bleu</button>
<button class="ring-2 ring-offset-2">Ring avec offset</button>

<!-- Focus ring (pattern commun) -->
<input class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" />

---

Flexbox et Grid

Flexbox Container

<div class="flex">
  <!-- Direction -->
  <div class="flex flex-row">Horizontal (défaut)</div>
  <div class="flex flex-row-reverse">Horizontal inversé</div>
  <div class="flex flex-col">Vertical</div>
  <div class="flex flex-col-reverse">Vertical inversé</div>

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

Justify Content

<div class="flex justify-start">Start</div>
<div class="flex justify-end">End</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Space evenly</div>

Align Items

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

Align Self

<div class="flex">
  <div class="self-auto">Auto</div>
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-end">End</div>
  <div class="self-stretch">Stretch</div>
</div>

Flex Grow/Shrink

<div class="flex">
  <div class="flex-1">Grow (flex: 1 1 0%)</div>
  <div class="flex-auto">Auto (flex: 1 1 auto)</div>
  <div class="flex-initial">Initial (flex: 0 1 auto)</div>
  <div class="flex-none">None (flex: none)</div>

  <div class="grow">Grow</div>
  <div class="grow-0">No grow</div>
  <div class="shrink">Shrink</div>
  <div class="shrink-0">No shrink</div>
</div>

Gap

<div class="flex gap-4">Gap 16px</div>
<div class="flex gap-x-4">Gap horizontal</div>
<div class="flex gap-y-4">Gap vertical</div>

Grid Container

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

<!-- Lignes -->
<div class="grid grid-rows-2">2 lignes</div>
<div class="grid grid-rows-3">3 lignes</div>

<!-- Gap -->
<div class="grid grid-cols-3 gap-4">Gap 16px</div>
<div class="grid grid-cols-3 gap-x-4 gap-y-8">Gap différent</div>

Grid Column/Row Span

<div class="grid grid-cols-6">
  <div class="col-span-2">2 colonnes</div>
  <div class="col-span-3">3 colonnes</div>
  <div class="col-span-full">Full width</div>

  <!-- Start/End -->
  <div class="col-start-2 col-end-4">Colonnes 2-4</div>
  <div class="col-start-1 col-span-2">Start 1, span 2</div>
</div>

<div class="grid grid-rows-4">
  <div class="row-span-2">2 lignes</div>
  <div class="row-start-2 row-end-4">Lignes 2-4</div>
</div>

Grid Auto Flow

<div class="grid grid-flow-row">Par ligne (défaut)</div>
<div class="grid grid-flow-col">Par colonne</div>
<div class="grid grid-flow-dense">Dense</div>

---

Responsive design

Breakpoints

Breakpoint	Min-width	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

Mobile-first approach

<!-- Base = mobile, puis responsive -->
<div class="text-sm md:text-base lg:text-lg">
  Small sur mobile, base sur tablette, large sur desktop
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
  1 colonne mobile, 2 tablette, 4 desktop
</div>

<!-- Hide/Show responsive -->
<div class="hidden md:block">Visible tablette+</div>
<div class="block md:hidden">Visible mobile uniquement</div>

<!-- Padding responsive -->
<div class="p-4 md:p-6 lg:p-8">
  16px mobile, 24px tablette, 32px desktop
</div>

Exemples de patterns responsive

<!-- Navigation responsive -->
<nav class="flex flex-col md:flex-row items-start md:items-center gap-4">
  <a href="#">Accueil</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<!-- Cards responsive -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Container responsive -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    Content
  </div>
</div>

<!-- Hero section responsive -->
<section class="py-12 md:py-20 lg:py-32">
  <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold">
    Titre responsive
  </h1>
</section>

---

Dark mode

Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class', // ou 'media' pour system preference
  // ...
}

Utilisation avec classe

<!-- Ajouter class="dark" sur <html> ou parent -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
      <h1 class="text-gray-900 dark:text-white">Titre</h1>
      <p class="text-gray-600 dark:text-gray-400">Description</p>

      <button class="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700">
        Bouton
      </button>
    </div>
  </body>
</html>

Toggle dark mode (JavaScript)

// Fonction toggle
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem(
    'theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

// Initialiser au chargement
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

Exemples de composants dark mode

<!-- Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-700/50 p-6">
  <h3 class="text-xl font-bold text-gray-900 dark:text-white">Titre</h3>
  <p class="text-gray-600 dark:text-gray-400">Description</p>
</div>

<!-- Input -->
<input
  class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-400"
  type="text"
/>

<!-- Link -->
<a class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
  Lien
</a>

---

Animations et transitions

Transition

<!-- Transition base -->
<button class="transition">Transition défaut</button>
<button class="transition-all">Toutes propriétés</button>
<button class="transition-colors">Couleurs</button>
<button class="transition-opacity">Opacité</button>
<button class="transition-shadow">Ombre</button>
<button class="transition-transform">Transform</button>

<!-- Duration -->
<button class="transition duration-75">75ms</button>
<button class="transition duration-150">150ms (défaut)</button>
<button class="transition duration-300">300ms</button>
<button class="transition duration-500">500ms</button>
<button class="transition duration-1000">1000ms</button>

<!-- Timing function -->
<button class="transition ease-linear">Linear</button>
<button class="transition ease-in">Ease in</button>
<button class="transition ease-out">Ease out</button>
<button class="transition ease-in-out">Ease in-out</button>

<!-- Delay -->
<button class="transition delay-75">Delay 75ms</button>
<button class="transition delay-150">Delay 150ms</button>

Transform

<!-- Scale -->
<div class="scale-0">0%</div>
<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-150">150%</div>
<div class="hover:scale-110 transition">Hover scale</div>

<!-- Rotate -->
<div class="rotate-0">0°</div>
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-45">-45°</div>

<!-- Translate -->
<div class="translate-x-4">Translate X 16px</div>
<div class="translate-y-4">Translate Y 16px</div>
<div class="-translate-x-1/2">-50% X (centrage)</div>
<div class="-translate-y-1/2">-50% Y</div>

<!-- Skew -->
<div class="skew-x-12">Skew X 12°</div>
<div class="skew-y-6">Skew Y 6°</div>

<!-- Transform origin -->
<div class="origin-center">Center</div>
<div class="origin-top">Top</div>
<div class="origin-top-right">Top-right</div>

Animations prédéfinies

<div class="animate-spin">Rotation continue</div>
<div class="animate-ping">Ping (radar)</div>
<div class="animate-pulse">Pulse</div>
<div class="animate-bounce">Bounce</div>

<!-- Exemples d'usage -->
<div class="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full">
  <!-- Loading spinner -->
</div>

Exemples d’interactions

<!-- Hover effects -->
<button class="bg-blue-500 hover:bg-blue-600 transition-colors">
  Hover color
</button>

<button class="transform hover:scale-105 hover:shadow-lg transition">
  Hover lift
</button>

<button class="hover:-translate-y-1 hover:shadow-lg transition">
  Hover rise
</button>

<!-- Focus effects -->
<input class="focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" />

<!-- Active state -->
<button class="active:scale-95 transition">
  Click shrink
</button>

<!-- Group hover -->
<div class="group">
  <img class="group-hover:scale-110 transition" />
  <h3 class="group-hover:text-blue-600 transition">Titre</h3>
</div>

---

Configuration personnalisée

Étendre le thème

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        'primary': '#3b82f6',
        'secondary': '#8b5cf6',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      fontFamily: {
        'display': ['Inter', 'sans-serif'],
        'body': ['Open Sans', 'sans-serif'],
      },
      fontSize: {
        'xxs': '0.625rem',
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem',
      },
      screens: {
        '3xl': '1920px',
      },
      zIndex: {
        '60': '60',
        '70': '70',
        '80': '80',
        '90': '90',
        '100': '100',
      },
    },
  },
}

Remplacer le thème par défaut

module.exports = {
  theme: {
    // Remplace complètement la config par défaut
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
      white: '#ffffff',
      black: '#000000',
    },
    // extend: {} pour garder les valeurs par défaut
  },
}

Créer des composants personnalisés

/* styles.css */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }
}

Utilitaires personnalisés

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }
}

Classes arbitraires

<!-- Valeurs personnalisées -->
<div class="w-[247px]">Width 247px</div>
<div class="top-[117px]">Top 117px</div>
<div class="text-[#1da1f2]">Couleur custom</div>
<div class="bg-[url('/img/hero.jpg')]">Background image</div>
<div class="grid-cols-[200px_1fr_1fr]">Grid custom</div>

<!-- CSS variables -->
<div class="bg-[var(--brand-color)]">CSS variable</div>
<div class="text-[length:var(--font-size)]">Font size variable</div>

---

Plugins et extensions

Plugins officiels

# Forms
npm install -D @tailwindcss/forms

# Typography
npm install -D @tailwindcss/typography

# Aspect Ratio
npm install -D @tailwindcss/aspect-ratio

# Line Clamp
npm install -D @tailwindcss/line-clamp

# Container Queries
npm install -D @tailwindcss/container-queries

Configuration des plugins

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/container-queries'),
  ],
}

@tailwindcss/forms

<!-- Inputs stylisés automatiquement -->
<input type="text" class="form-input" />
<input type="checkbox" class="form-checkbox" />
<input type="radio" class="form-radio" />
<select class="form-select">
  <option>Option 1</option>
</select>
<textarea class="form-textarea"></textarea>

@tailwindcss/typography

<!-- Prose : style automatique du contenu -->
<article class="prose lg:prose-xl">
  <h1>Titre</h1>
  <p>Paragraphe avec style automatique...</p>
  <ul>
    <li>Liste</li>
  </ul>
</article>

<!-- Dark mode -->
<article class="prose dark:prose-invert">
  Content
</article>

<!-- Personnalisation -->
<article class="prose prose-blue prose-lg">
  Content
</article>

@tailwindcss/aspect-ratio

<div class="aspect-w-16 aspect-h-9">
  <iframe src="..."></iframe>
</div>

<div class="aspect-square">
  <img src="..." />
</div>

<div class="aspect-video">
  <video src="..."></video>
</div>

Container Queries

<div class="@container">
  <div class="@lg:text-xl @2xl:text-2xl">
    Responsive au container parent
  </div>
</div>

Plugin personnalisé

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme }) {
      // Ajouter des utilitaires
      addUtilities({
        '.rotate-y-180': {
          transform: 'rotateY(180deg)',
        },
        '.preserve-3d': {
          transformStyle: 'preserve-3d',
        },
      });

      // Ajouter des composants
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        },
      });
    }),
  ],
}

---

Bonnes pratiques

Organisation des classes

<!-- Ordre recommandé : Layout > Display > Spacing > Sizing > Typography > Visual > Misc -->
<div class="
  relative
  flex items-center justify-between
  px-4 py-3 mb-4
  w-full max-w-md
  text-lg font-semibold
  bg-white rounded-lg shadow-md
  hover:shadow-lg transition-shadow
">
  Content
</div>

Éviter la répétition avec @apply

/* Au lieu de répéter partout : */
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">

/* Créer un composant : */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
}

<button class="btn-primary">

Composants réutilisables

// React component
function Button({ variant = 'primary', size = 'md', children }) {
  const baseClasses = 'font-medium rounded transition-colors';

  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600',
  };

  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  };

  const classes = `${baseClasses} ${variants[variant]} ${sizes[size]}`;

  return <button className={classes}>{children}</button>;
}

Purge/Content configuration

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './pages/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{html,js,jsx,ts,tsx}',
    // Safelist pour classes dynamiques
  ],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
}

Performance

// 1. Utiliser JIT mode (activé par défaut Tailwind 3+)
// 2. Purger les classes inutilisées en production
// 3. Minimiser l'usage de @apply
// 4. Utiliser des composants pour la répétition
// 5. Lazy load le CSS si possible

Accessibilité

<!-- Focus visible -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Accessible button
</button>

<!-- Screen reader only -->
<span class="sr-only">Description pour lecteurs d'écran</span>

<!-- Not screen reader only -->
<span class="not-sr-only">Visible</span>

<!-- Skip link -->
<a href="#main" class="sr-only focus:not-sr-only">
  Passer au contenu principal
</a>

Dark mode système + manuel

// Support préférence système + toggle manuel
function initTheme() {
  const theme = localStorage.getItem('theme');
  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (theme === 'dark' || (!theme && systemDark)) {
    document.documentElement.classList.add('dark');
  }
}

// Écouter les changements système
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', e => {
    if (!localStorage.getItem('theme')) {
      document.documentElement.classList.toggle('dark', e.matches);
    }
  });

---

Pièges courants à éviter

1. Classes dynamiques non sécurisées

<!-- MAUVAIS : ne fonctionnera pas avec purge -->
<div class="text-{{ color }}-500">

<!-- BON : utiliser safelist ou classes complètes -->
<div class="{{ color === 'red' ? 'text-red-500' : 'text-blue-500' }}">

2. Surcharge de @apply

/* ÉVITER : trop de @apply */
.button {
  @apply px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600 active:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

/* PRÉFÉRER : HTML avec classes utilitaires */
<button class="px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600">

3. Ignorer le mobile-first

<!-- MAUVAIS : desktop-first -->
<div class="w-1/2 sm:w-full">

<!-- BON : mobile-first -->
<div class="w-full sm:w-1/2">

4. Classes importantes excessives

/* ÉVITER */
.my-class {
  @apply !bg-blue-500 !text-white !p-4;
}

/* PRÉFÉRER : meilleure spécificité CSS */

5. Oublier les states hover/focus

<!-- MAUVAIS : pas d'état interactif -->
<button class="bg-blue-500 text-white">Click</button>

<!-- BON : avec states -->
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 text-white">
  Click
</button>

---

Ressources

Documentation officielle

• https://tailwindcss.com/docs
• https://tailwindui.com (composants premium)
• https://headlessui.com (composants accessibles)

Outils

• Tailwind CSS IntelliSense : Extension VSCode
• Tailwind Play : Playground en ligne
• Tailwind Cheat Sheet : Référence rapide

Composants communautaires

• daisyUI : Bibliothèque de composants
• Flowbite : Composants open-source
• Preline : Composants UI
• Tailwind Elements : Bootstrap-like components

Classes utiles mémorisables

Spacing: 4 = 16px (1rem), 8 = 32px, 12 = 48px, 16 = 64px
Text sizes: sm(14px), base(16px), lg(18px), xl(20px), 2xl(24px)
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px)
Container max-width: xs(320), sm(384), md(448), lg(512), xl(576), 2xl(672)
Colors: 50(lightest) → 900(darkest)
Z-index: 0, 10, 20, 30, 40, 50

---

Version : Tailwind CSS 3.4+ Dernière mise à jour : Décembre 2024

Ce guide couvre les fonctionnalités essentielles de Tailwind CSS pour le développement web moderne avec un focus sur les meilleures pratiques et l’optimisation.