Personnalisation
Thème custom, couleurs sur mesure et plugins.
7.1Configuration v4 (CSS-first)
Tailwind v4 a déplacé la configuration du tailwind.config.js vers le CSS directement avec @theme :
CSScss
/* globals.css - Tailwind v4 */
@import "tailwindcss";
@theme {
/* Couleurs custom */
--color-brand: #6366f1;
--color-brand-light: #818cf8;
--color-brand-dark: #4f46e5;
/* Palette complète */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
/* Fonts */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "Fira Code", monospace;
/* Spacing custom (en plus de l'échelle par défaut) */
--spacing-18: 4.5rem;
--spacing-88: 22rem;
/* Breakpoints custom */
--breakpoint-xs: 475px;
--breakpoint-3xl: 1800px;
/* Animations custom */
--animate-fade-in: fade-in 0.5s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}HTMLhtml
<!-- Utilisation des valeurs custom -->
<div class="bg-brand text-white">Fond couleur brand</div>
<div class="text-primary-600">Texte couleur primaire</div>
<div class="font-mono">Police Fira Code</div>
<div class="mt-18">Margin-top custom</div>
<div class="animate-fade-in">Apparition animée</div>
<div class="xs:block hidden">Visible à partir de 475px</div>7.2Configuration v3 (JavaScript)
Pour les projets encore en v3, la config se fait dans tailwind.config.js :
JavaScriptjavascript
// tailwind.config.js (v3)
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
// Ajoute SANS remplacer les valeurs par défaut
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
code: ['Fira Code', 'monospace'],
},
spacing: {
'18': '4.5rem',
'88': '22rem',
},
borderRadius: {
'4xl': '2rem',
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
},
},
},
plugins: [],
}7.3CSS Variables et thèmes dynamiques
CSScss
/* Thème dynamique avec CSS variables (v4) */
@import "tailwindcss";
@theme {
--color-surface: var(--surface);
--color-on-surface: var(--on-surface);
--color-accent: var(--accent);
}
/* Thème clair */
:root {
--surface: #ffffff;
--on-surface: #0f172a;
--accent: #3b82f6;
}
/* Thème sombre */
.dark {
--surface: #0f172a;
--on-surface: #f1f5f9;
--accent: #60a5fa;
}HTMLhtml
<!-- Utilisation : s'adapte automatiquement au thème -->
<div class="bg-surface text-on-surface">
<button class="bg-accent text-white px-4 py-2 rounded-lg">
Bouton thématique
</button>
</div>
<!-- Pour changer le thème, il suffit d'ajouter/retirer .dark sur <html> -->7.4Plugins
Bashbash
# Plugins officiels
npm install @tailwindcss/typography # Prose styling pour le contenu
npm install @tailwindcss/forms # Styles de formulaires
npm install @tailwindcss/container-queries # Container queries
npm install tailwindcss-animate # Animations supplémentairesCSScss
/* Utilisation des plugins en v4 */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";HTMLhtml
<!-- Plugin Typography : style automatique du contenu -->
<article class="prose prose-lg prose-blue max-w-none">
<h1>Mon article</h1>
<p>Le texte est automatiquement stylé : marges, tailles,
couleurs de liens, listes à puces, citations...</p>
<blockquote>Les citations sont jolies aussi.</blockquote>
<pre><code>Et le code aussi.</code></pre>
</article>
<!-- Plugin Forms : inputs pré-stylés -->
<input type="text" class="form-input rounded-lg" />
<select class="form-select rounded-lg">
<option>Option</option>
</select>