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
- Installation et configuration
- Layout et positionnement
- Spacing (marges et padding)
- Typographie
- Couleurs et backgrounds
- Borders et effets
- Flexbox et Grid
- Responsive design
- Dark mode
- Animations et transitions
- Configuration personnalisée
- 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)
—
Layout et positionnement
Display
Block
Inline
Inline-block
Flex container
Grid container
Caché
Table
Row
Cell
Position
Static (défaut)
Relative
Absolute
Fixed
Sticky
Full
Horizontal
Vertical
Custom
z-0
z-10
z-20
z-30
z-40
z-50
z-auto
Width et Height
w-0 (0px)
w-px (1px)
w-0.5 (2px/0.125rem)
w-1 (4px/0.25rem)
w-2 (8px)
w-4 (16px)
w-8 (32px)
w-16 (64px)
w-32 (128px)
w-64 (256px)
w-1/2 (50%)
w-1/3 (33.333%)
w-2/3 (66.666%)
w-1/4 (25%)
w-3/4 (75%)
w-full (100%)
w-screen (100vw)
w-svw (100svw)
w-lvw (100lvw)
w-dvw (100dvw)
min-w-0
min-w-full
max-w-xs (320px)
max-w-sm (384px)
max-w-md (448px)
max-w-lg (512px)
max-w-xl (576px)
max-w-2xl (672px)
max-w-4xl (896px)
max-w-7xl (1280px)
max-w-full
h-64
h-screen (100vh)
min-h-screen
Overflow
Auto
Hidden
Visible
Scroll
X-Auto
Y-Auto
Object Fit et Position
—
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
Margin 4 (16px) tous côtés
Margin horizontal (left + right)
Margin vertical (top + bottom)
Margin top
Margin right
Margin bottom
Margin left
Negative margin
Negative margin top
Centré horizontalement
Aligné à droite
Padding
Padding 4 (16px) tous côtés
Padding horizontal
Padding vertical
Padding top
Padding right
Padding bottom
Padding left
Space Between
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
—
Typographie
Font Family
Sans-serif (défaut)
Serif
Monospace
Font Size
Extra small (0.75rem/12px)
Small (0.875rem/14px)
Base (1rem/16px)
Large (1.125rem/18px)
Extra large (1.25rem/20px)
2xl (1.5rem/24px)
3xl (1.875rem/30px)
4xl (2.25rem/36px)
5xl (3rem/48px)
6xl (3.75rem/60px)
7xl (4.5rem/72px)
8xl (6rem/96px)
9xl (8rem/128px)
Font Weight
100
200
300
400
500
600
700
800
900
Text Alignment
Gauche
Centré
Droite
Justifié
Start (RTL aware)
End (RTL aware)
Text Decoration
Souligné
Ligne au-dessus
Barré
Sans décoration
Solid
Double
Pointillé
Tirets
Ondulé
Rouge
Épaisseur 2px
Text Transform
MAJUSCULES
minuscules
Capitalisé
Normal
Line Height
1
1.25
1.375
1.5
1.625
2
0.75rem
2.5rem
Letter Spacing
-0.05em
-0.025em
0
0.025em
0.05em
0.1em
Text Overflow
Tronqué avec ellipsis
Ellipsis
Clip
Une ligne max
Deux lignes max
Trois lignes max
Text Indent et Alignment
Indentation 32px
Baseline
Top
Middle
Bottom
Text top
Text bottom
—
Couleurs et backgrounds
Palette de couleurs
Tailwind inclut les couleurs suivantes (50-900) :
Text Colors
Gris 500
Bleu 600
Rouge 500
Vert 600
50% opacité
75% opacité
100% opacité
Background Colors
Blanc
Noir
Gris clair
Gris foncé
Bleu
Bleu 50% opacité
Transparent
Gradients
Gauche à droite
Haut en bas
Diagonal (top-right)
Trois couleurs
Background Image
Background image
Pas de background
Centré
Haut
Bas
Gauche
Droite
Cover
Contain
Auto
Repeat
No repeat
Repeat X
Repeat Y
—
Borders et effets
Border Width
Border 1px tous côtés
Pas de border
Border 2px
Border 4px
Border 8px
Top
Right
Bottom
Left
Left + Right
Top + Bottom
Border Color
Gris
Bleu
Rouge 50% opacité
Border Style
Solid
Dashed
Dotted
Double
None
Border Radius
0.25rem
0.375rem
0.5rem
0.75rem
1rem
1.5rem
9999px (cercle)
Top
Right
Bottom
Left
Top-left
Top-right
Bottom-right
Bottom-left
Box Shadow
Petite ombre
Ombre standard
Ombre moyenne
Grande ombre
Très grande ombre
Ombre maximale
Ombre intérieure
Pas d'ombre
Ombre bleue
Opacity
Invisible
25%
50%
75%
100%
Outline
Ring (outline avec offset)
—
Flexbox et Grid
Flexbox Container
Horizontal (défaut)
Horizontal inversé
Vertical
Vertical inversé
Wrap
Wrap reverse
Nowrap
Justify Content
Start
End
Center
Space between
Space around
Space evenly
Align Items
Start
End
Center
Baseline
Stretch
Align Self
Auto
Start
Center
End
Stretch
Flex Grow/Shrink
Grow (flex: 1 1 0%)
Auto (flex: 1 1 auto)
Initial (flex: 0 1 auto)
None (flex: none)
Grow
No grow
Shrink
No shrink
Gap
Gap 16px
Gap horizontal
Gap vertical
Grid Container
1 colonne
2 colonnes
3 colonnes
4 colonnes
12 colonnes
2 lignes
3 lignes
Gap 16px
Gap différent
Grid Column/Row Span
2 colonnes
3 colonnes
Full width
Colonnes 2-4
Start 1, span 2
2 lignes
Lignes 2-4
Grid Auto Flow
Par ligne (défaut)
Par colonne
Dense
—
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
Small sur mobile, base sur tablette, large sur desktop
1 colonne mobile, 2 tablette, 4 desktop
Visible tablette+
Visible mobile uniquement
16px mobile, 24px tablette, 32px desktop
Exemples de patterns responsive
...
...
...
Content
Titre responsive
—
Dark mode
Configuration
// tailwind.config.js
module.exports = {
darkMode: 'class', // ou 'media' pour system preference
// ...
}
Utilisation avec classe
Titre
Description
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
Titre
Description
Lien
—
Animations et transitions
Transition
Transform
0%
50%
100%
150%
Hover scale
0°
45°
90°
180°
-45°
Translate X 16px
Translate Y 16px
-50% X (centrage)
-50% Y
Skew X 12°
Skew Y 6°
Center
Top
Top-right
Animations prédéfinies
Rotation continue
Ping (radar)
Pulse
Bounce
Exemples d’interactions
![]()
Titre
—
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
Width 247px
Top 117px
Couleur custom
Background image
Grid custom
CSS variable
Font size variable
—
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
@tailwindcss/typography
Titre
Paragraphe avec style automatique...
- Liste
Content
Content
@tailwindcss/aspect-ratio
Container Queries
Responsive au container parent
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
Content
Éviter la répétition avec @apply
/ Au lieu de répéter partout : /
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 ;
}
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é
Description pour lecteurs d'écran
Visible
Passer au contenu principal
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
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 /
3. Ignorer le mobile-first
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
—
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.