Guide Complet • Tailwind CSS v3+

Guide Complet Tailwind CSS Colors 2025

Configuration, palettes personnalisées, dark mode et génération automatique : tout ce qu'il faut savoir sur les couleurs dans Tailwind CSS.

tailwind.config.js

Configuration des couleurs personnalisées

Lecture : 15 min•15+ exemples de code•2 palettes complètes

1. Introduction aux couleurs Tailwind CSS

Tailwind CSS offre un système de couleurs complet et personnalisable qui permet de créer des interfaces cohérentes rapidement. Contrairement aux frameworks CSS traditionnels, Tailwind vous donne un contrôle total sur vos couleurs via le fichier de configuration.

Bon à savoir

Tailwind CSS v3+ inclut une palette par défaut de 22 couleurs × 11 nuances = 242 couleurs prêtes à l'emploi !

Avantages du système de couleurs Tailwind

  • Cohérence garantie : Palette centralisée dans tailwind.config.js
  • Classes utilitaires : bg-, text-, border-, etc. pour application rapide
  • Dark mode intégré : Support natif pour thèmes clairs/foncés
  • Personnalisation totale : Remplacez ou étendez les couleurs par défaut

2. Palette par défaut de Tailwind

Tailwind CSS v3 inclut 22 couleurs principales, chacune avec 11 nuances (de 50 à 950) :

slate

50-950

gray

50-950

zinc

50-950

neutral

50-950

stone

50-950

red

50-950

orange

50-950

amber

50-950

yellow

50-950

lime

50-950

green

50-950

emerald

50-950

teal

50-950

cyan

50-950

sky

50-950

blue

50-950

indigo

50-950

violet

50-950

purple

50-950

fuchsia

50-950

pink

50-950

rose

50-950

Nomenclature des nuances

  • • 50 : Très clair (backgrounds, hovers subtils)
  • • 100-400 : Clair à moyen (backgrounds secondaires, borders)
  • • 500-600 : Couleurs principales (boutons, liens)
  • • 700-950 : Foncé (textes, dark mode)

3. Configuration tailwind.config.js

Le fichier tailwind.config.js est le cœur de la personnalisation des couleurs. Voici comment l'utiliser efficacement :

Structure de base

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Option 1 : Remplacer toutes les couleurs par défaut
      primary: '#6366F1',
      secondary: '#8B5CF6',

      // Option 2 : Étendre les couleurs par défaut
      extend: {
        colors: {
          brand: '#FF6B6B'
        }
      }
    }
  }
}

Méthode 1 : Colors avec nuances

// Palette complète avec nuances
theme: {
  extend: {
    colors: {
      primary: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        200: '#bae6fd',
        300: '#7dd3fc',
        400: '#38bdf8',
        500: '#0ea5e9',   // Couleur principale
        600: '#0284c7',
        700: '#0369a1',
        800: '#075985',
        900: '#0c4a6e',
        950: '#082f49',
      }
    }
  }
}

// Utilisation :
<button className="bg-primary-500 hover:bg-primary-600">
  Cliquez-moi
</button>

4. Créer des palettes personnalisées

Modern SaaS

Palette professionnelle pour applications SaaS modernes

primary

50#f0f9ff
100#e0f2fe
500#0ea5e9
600#0284c7
900#0c4a6e

secondary

50#faf5ff
100#f3e8ff
500#a855f7
600#9333ea
900#581c87

accent

50#fef3c7
100#fde68a
500#f59e0b
600#d97706
900#78350f
colors: {
  "primary": {
    "50": "#f0f9ff",
    "100": "#e0f2fe",
    "500": "#0ea5e9",
    "600": "#0284c7",
    "900": "#0c4a6e"
  },
  "secondary": {
    "50": "#faf5ff",
    "100": "#f3e8ff",
    "500": "#a855f7",
    "600": "#9333ea",
    "900": "#581c87"
  },
  "accent": {
    "50": "#fef3c7",
    "100": "#fde68a",
    "500": "#f59e0b",
    "600": "#d97706",
    "900": "#78350f"
  }
}

E-commerce Luxe

Élégance et sophistication pour boutiques haut de gamme

primary

50#faf5ff
100#f3e8ff
500#7c3aed
600#6d28d9
900#4c1d95

secondary

50#fef3c7
100#fde68a
500#d97706
600#b45309
900#78350f

accent

50#fafafa
100#f4f4f5
500#18181b
600#09090b
900#000000
colors: {
  "primary": {
    "50": "#faf5ff",
    "100": "#f3e8ff",
    "500": "#7c3aed",
    "600": "#6d28d9",
    "900": "#4c1d95"
  },
  "secondary": {
    "50": "#fef3c7",
    "100": "#fde68a",
    "500": "#d97706",
    "600": "#b45309",
    "900": "#78350f"
  },
  "accent": {
    "50": "#fafafa",
    "100": "#f4f4f5",
    "500": "#18181b",
    "600": "#09090b",
    "900": "#000000"
  }
}

5. Classes utilitaires de couleurs

Tailwind génère automatiquement des classes utilitaires pour toutes vos couleurs configurées :

PropriétéClasse TailwindCSS équivalent
Backgroundbg-primary-500background-color: #0ea5e9
Texttext-primary-600color: #0284c7
Borderborder-primary-500border-color: #0ea5e9
Ringring-primary-500box-shadow: ring
Placeholderplaceholder-primary-400color (placeholder)

6. Dark mode et couleurs

Tailwind CSS permet de gérer facilement le dark mode avec le préfixe dark: :

<div class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white">
  <h1 class="text-primary-600 dark:text-primary-400">
    Titre adapté au thème
  </h1>
  <p class="text-stone-700 dark:text-stone-300">
    Contenu qui s'adapte automatiquement
  </p>
  <button class="bg-primary-500 hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-700">
    Bouton avec états dark
  </button>
</div>

Astuce Pro

Utilisez des nuances plus claires (400-500) pour le dark mode et plus foncées (600-700) pour le light mode pour garantir un bon contraste.

7. Génération automatique avec IA

Créer des palettes Tailwind CSS manuellement peut prendre du temps. PaletteIA génère automatiquement des configurations tailwind.config.js prêtes à l'emploi en 3 secondes.

Votre description :

"Modern SaaS dashboard for analytics"

GPT-4 génère en 3 secondes
colors: {
  primary: {
    500: '#0ea5e9',
    600: '#0284c7',
    // ... 11 nuances
  },
  secondary: {...},
  accent: {...}
}

3 secondes

Génération instantanée avec GPT-4

Copy-paste

Config prête pour tailwind.config.js

11 nuances

Palette complète 50-950 automatique

Essayer PaletteIA gratuitement

3 générations gratuites par jour • Aucune carte requise

8. Bonnes pratiques

✅ À faire

  • • Utilisez extend pour ajouter des couleurs sans perdre la palette par défaut
  • • Créez des palettes complètes avec 11 nuances (50-950) pour la flexibilité
  • • Nommez vos couleurs selon leur fonction (primary, secondary) plutôt que leur apparence (blue, red)
  • • Testez le contraste pour l'accessibilité WCAG AA/AAA
  • • Prévoyez des variantes dark mode dès le début

❌ À éviter

  • • Ne remplacez pas toute la palette par défaut sauf nécessité absolue
  • • N'utilisez pas de couleurs en dur dans les composants (className="bg-[#FF0000]")
  • • Évitez trop de couleurs personnalisées (restez sur 3-5 couleurs principales max)
  • • Ne négligez pas les nuances intermédiaires (200, 300, 400, etc.)

Questions fréquentes

Comment ajouter une seule couleur personnalisée ?▼

Utilisez extend.colors dans votre config :

theme: {
  extend: {
    colors: {
      brand: '#FF6B6B'
    }
  }
}

Puis-je utiliser les couleurs Tailwind avec opacity ?▼

Oui ! Utilisez les classes bg-primary-500/50 pour 50% d'opacité, ou /75, /25, etc.

Comment générer automatiquement les 11 nuances d'une couleur ?▼

Utilisez PaletteIA qui génère automatiquement les 11 nuances (50-950) à partir d'une seule couleur de base ou d'une description de projet. Export Tailwind en un clic !

Les couleurs Tailwind sont-elles accessibles (WCAG) ?▼

La palette par défaut respecte généralement le WCAG, mais vous devez toujours vérifier le contraste entre texte et fond. Utilisez text-900 sur bg-50 ou text-50 sur bg-900 pour un bon contraste.

Générez vos palettes Tailwind CSS en 3 secondes

Décrivez votre projet, obtenez une config Tailwind complète avec 11 nuances par couleur. Export copy-paste prêt à l'emploi.

Essayer gratuitement →

Articles connexes

Comment Choisir les Couleurs de son Site Web ?

Méthode en 5 étapes pour choisir une palette efficace et cohérente.

Psychologie des Couleurs en Web Design

Comment les couleurs influencent émotions, comportements et conversions.

Top 15 Générateurs de Palettes 2025

Comparatif des meilleurs outils de génération de palettes de couleurs.