Tailwind CSS : le guide pratique pour débuter rapidement

Tailwind CSS : pourquoi tout le monde en parle

Tailwind CSS n'est pas un framework comme Bootstrap. Il ne vous impose pas de composants pré-stylés : il vous donne des classes utilitaires atomiques que vous combinez directement dans votre HTML. Le résultat ? Moins de CSS custom à maintenir, une cohérence visuelle naturelle et une productivité décuplée.

En 2025, Tailwind est utilisé par des millions de projets et s'est imposé comme le standard de facto pour les développeurs React, Vue et même PHP.

Installation dans un projet existant

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration minimale dans tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,php,twig}',
    './templates/**/*.twig',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans votre CSS principal :

@tailwind base;
@tailwind components;
@tailwind utilities;

Les classes utilitaires essentielles

Espacement (margin, padding)

<!-- Padding : p-4 = 1rem, p-8 = 2rem, px-6 = padding horizontal -->
<div class="p-6 px-8 my-4">Contenu</div>

<!-- Margin automatique pour centrer -->
<div class="mx-auto max-w-2xl">Centré</div>

Typographie

<h1 class="text-4xl font-bold text-gray-900 leading-tight">Titre principal</h1>
<p class="text-base text-gray-600 leading-relaxed">Paragraphe de texte normal.</p>
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Label</span>

Flexbox et Grid

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <span>Gauche</span>
  <span>Droite</span>
</div>

<!-- Grid 3 colonnes responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-4">Carte 1</div>
  <div class="bg-white rounded-lg shadow p-4">Carte 2</div>
  <div class="bg-white rounded-lg shadow p-4">Carte 3</div>
</div>

Responsive design avec les préfixes

Tailwind utilise une approche mobile-first. Les breakpoints s'appliquent à partir d'une certaine largeur :

<!-- Colonne sur mobile, 3 colonnes sur desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Contenu principal</div>
</div>

Dark mode

Activez le dark mode dans la config :

module.exports = {
  darkMode: 'class', // ou 'media' pour suivre les préférences système
  // ...
}

Puis utilisez le préfixe dark: :

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  <h1 class="text-2xl font-bold">Titre adaptatif</h1>
  <p class="text-gray-600 dark:text-gray-400">Texte secondaire</p>
</div>

Créer des composants réutilisables avec @apply

Quand vous répétez souvent les mêmes classes, créez un composant CSS :

/* Dans votre CSS */
@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white 
           font-semibold rounded-lg hover:bg-blue-700 transition-colors 
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6 border border-gray-100 
           hover:shadow-lg transition-shadow;
  }
}

Optimisation de la taille en production

Tailwind purge automatiquement les classes non utilisées grâce à son analyse statique du contenu. En production, le CSS généré pèse généralement 5 à 15 KB — bien moins que Bootstrap.

# Build production
npm run build
# Le CSS final est minifié et purgé automatiquement

Intégration avec des projets PHP/Twig

Tailwind fonctionne parfaitement avec des templates Twig. Configurez simplement le content pour inclure vos fichiers .twig :

content: ['./templates/**/*.twig', './public/**/*.php'],

Et lancez le watcher pendant le développement :

npx tailwindcss -i ./src/css/main.css -o ./public/assets/css/main.css --watch

Récapitulatif des ressources essentielles

Pour progresser rapidement avec Tailwind CSS, voici les ressources que j'utilise au quotidien : la documentation officielle est exceptionnellement bien faite, la communauté Tailwind UI propose des composants prêts à l'emploi, et le playground en ligne permet de tester des classes sans aucune installation. Avec Tailwind CSS, chaque projet devient plus cohérent et plus rapide à livrer.

Tailwind CSS en production : bonnes pratiques finales

Quelques règles qui font la différence dans un projet Tailwind CSS professionnel. Préférez les variants arbitraires ([&:nth-child(3)]:hidden) avec modération et encapsulez-les dans des composants. Utilisez @layer utilities pour vos classes custom plutôt que d'écrire du CSS séparé. Enfin, activez le mode JIT (Just-In-Time, activé par défaut depuis v3) pour des temps de compilation quasi instantanés même sur de grands projets Tailwind CSS.