Le duo Laravel Tailwind est l'un des moyens les plus rapides de construire une interface dans un projet : il associe Tailwind, un framework CSS utility-first, au compilateur d'assets basé sur Vite de Laravel, ce qui vous permet de concevoir directement dans Blade au lieu de jongler entre des feuilles de style séparées. Dans cet article, je vous guide pas à pas pour installer Tailwind dans un projet Laravel vierge de bout en bout, utiliser les classes utilitaires dans les templates Blade, ranger les motifs répétés avec des composants Blade et garder un bundle de production léger.
Pourquoi Tailwind et Laravel s'entendent bien
Laravel 11 et 12 utilisent Vite pour compiler les assets. Comme Vite embarque un serveur de développement rapide avec hot module replacement, le navigateur se met à jour presque instantanément dès que vous ajoutez une classe. Tailwind, de son côté, fournit de petites classes utility à usage unique plutôt que des composants prêts à l'emploi : des choses comme flex, pt-4, text-center et bg-slate-900. Réunis, vous construisez des interfaces sans quitter votre HTML, sans inventer de noms et sans gonfler une énorme feuille de style. Et comme Tailwind ne compile que les classes réellement utilisées, le CSS final est généralement minuscule.
Installer Tailwind dans un projet Laravel
Si vous démarrez sur un projet Laravel neuf, créez-le et entrez dedans d'abord. Installez ensuite Tailwind et son plugin Vite officiel via npm. Dans les versions modernes de Tailwind, l'installation se fait avec un seul plugin Vite, sans configuration PostCSS séparée :
npm install tailwindcss @tailwindcss/viteOuvrez ensuite vite.config.js et ajoutez le plugin Tailwind à côté du plugin Laravel :
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
});Pour intégrer Tailwind dans votre fichier CSS d'entrée, ouvrez resources/css/app.css et ajoutez une seule ligne d'import. Tailwind moderne utilise un simple import au lieu de l'ancien trio @tailwind base; @tailwind components; @tailwind utilities; :
@import "tailwindcss";Enfin, chargez les assets dans le <head> de votre layout Blade principal. Laravel fournit la directive @vite pour cela :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900">
@yield('content')
</body>
</html>Pendant le développement, lancez npm run dev ; cela démarre le serveur de développement Vite et reflète instantanément les changements de classes. En parallèle, vous lancez l'application avec php artisan serve. C'est tout — vous êtes prêt à utiliser les classes Tailwind dans Blade.
Les classes utilitaires dans les templates Blade
L'idée de Tailwind est de styler directement dans l'attribut class de l'élément. La carte ci-dessous définit l'espacement, l'ombre, l'arrondi des coins et les couleurs uniquement avec des classes :
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h2 class="text-lg font-semibold text-slate-900">Titre du projet</h2>
<p class="mt-2 text-sm text-slate-600">Une courte description.</p>
<a href="#" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2
text-sm font-medium text-white hover:bg-indigo-700">Détails</a>
</div>Les préfixes comme hover:bg-indigo-700 constituent le système de variants de Tailwind. La même logique anime le responsive grâce aux points de rupture : les préfixes sm:, md: et lg: s'activent à cette taille d'écran et au-dessus. Par exemple, grid grid-cols-1 md:grid-cols-3 donne une seule colonne sur petit écran et trois colonnes sur écrans moyens et grands. Pour le mode sombre, il y a le préfixe dark: ; dark:bg-slate-900 ne s'applique que dans le thème sombre.
Combiner les directives Blade avec Tailwind
Tailwind ne se limite pas au HTML brut ; il s'entend très bien avec les helpers de classes conditionnelles de Blade. La directive @class est une façon propre d'ajouter des classes selon une condition :
<span @class([
'rounded px-2 py-1 text-xs font-medium',
'bg-green-100 text-green-800' => $actif,
'bg-slate-100 text-slate-500' => ! $actif,
])>
{{ $actif ? 'Actif' : 'Inactif' }}
</span>Cela vous permet de gérer les badges de statut, les boîtes d'alerte ou les styles d'onglet actif à un seul endroit lisible. Les mêmes classes utilitaires se répètent sans souci dans les boucles : styler un élément de liste dans @foreach est bien plus rapide que d'écrire du CSS séparé ailleurs.
Éviter la répétition avec les composants Blade
La critique la plus fréquente de l'approche utility-first est de répéter partout la même longue chaîne de classes. Dans Laravel, la réponse est les composants Blade. Créez un composant bouton :
php artisan make:component PrimaryButton --viewDans le fichier généré resources/views/components/primary-button.blade.php, écrivez les classes Tailwind une seule fois et fusionnez les attributs extérieurs avec $attributes :
<button {{ $attributes->merge([
'class' => 'rounded-lg bg-indigo-600 px-4 py-2 text-sm
font-medium text-white hover:bg-indigo-700',
]) }}>
{{ $slot }}
</button>Désormais, partout, vous écrivez simplement <x-primary-button>Enregistrer</x-primary-button>. Vous changez les classes à un seul endroit et la mise à jour se propage à tout le projet. Cela marie la souplesse de Tailwind à l'ordre du système de composants de Laravel.
Personnaliser le thème et compiler pour la production
Lorsque vous voulez ajouter des couleurs ou des polices propres à votre marque, définissez vos propres tokens de design avec un bloc @theme dans votre fichier CSS. Dans Tailwind moderne, la configuration se fait en grande partie en CSS :
@import "tailwindcss";
@theme {
--color-marque: #4f46e5;
--font-titre: "Inter", sans-serif;
}Après cette déclaration, des classes comme bg-marque ou font-titre deviennent disponibles automatiquement. Pour livrer en production, lancez npm run build ; cela minifie les assets, ajoute le versioning et écrit dans le dossier public/build. Tailwind purge automatiquement les classes inutilisées, si bien que le CSS final ne pèse généralement que quelques dizaines de kilo-octets. Pour éviter de compiler sur le serveur, c'est une bonne habitude d'inclure npm run build dans votre étape de déploiement puis de lancer php artisan optimize.
Questions fréquentes
Vite est-il obligatoire pour utiliser Tailwind ?
Pour les projets Laravel, en pratique oui, car Laravel fournit Vite comme compilateur d'assets par défaut et le plugin officiel @tailwindcss/vite est la voie la plus fluide. Tailwind peut être compilé avec le CLI autonome sans Vite, mais vous perdriez la directive @vite de Laravel et les avantages du hot reload.
De si longues chaînes de classes ne rendent-elles pas le HTML illisible ?
Cela peut sembler chargé au début, mais en pratique, une fois les motifs récurrents déplacés dans des composants Blade et la directive @class, le HTML s'épure vite. Beaucoup de développeurs préfèrent lire le style là où ils le voient plutôt que de naviguer dans des fichiers CSS séparés.
Pourquoi le fichier CSS de production est-il si petit ?
Tailwind analyse les templates de votre projet et n'émet que les classes réellement utilisées. Combiné à la minification après npm run build, le CSS final reste sur la plupart des sites sous quelques dizaines de kilo-octets.
Vous voulez accélérer votre interface Laravel avec Tailwind ? De l'installation au design system, de l'architecture des composants Blade à l'optimisation de production, construisons votre projet ensemble. Contactez-moi et dites-moi ce que vous avez en tête.