Installer Laravel 13 et Tailwind CSS v4 : Le guide complet avec Laravel Breeze

Pourquoi passer à Tailwind CSS v4 ?

Avant de mettre les mains dans le cambouis, pourquoi s'embêter ? La v4, c'est surtout une performance foudroyante grâce à son nouveau moteur Rust, mais c'est aussi une configuration simplifiée. Fini le fichier JS de 200 lignes, tout se passe maintenant directement dans votre CSS. C’est plus propre, plus rapide, et franchement plus agréable, vous ne trouvez pas ?

Étape 1 : Créer votre nouveau terrain de jeu

On commence par une base saine. Laravel 12 est là, il supporte PHP 8.4 et il est prêt à en découdre. Ouvrez votre terminal et lancez la commande magique :

laravel new mon-projet
cd mon-projet

Étape 2 : Installer Laravel Breeze (Le petit piège)

Breeze est génial pour l'auth, mais il est un peu conservateur. En l'installant, il va nous injecter Tailwind v3 et créer des fichiers de configuration dont on ne veut plus pour la v4.

composer require laravel/breeze --dev
php artisan breeze:install blade

Étape 3 : Le grand ménage de printemps

C'est ici que le sport commence ! Pour que Tailwind CSS v4 brille, on doit se débarrasser des vestiges du passé.

1. Désinstaller l'ancienne version :

npm uninstall tailwindcss postcss autoprefixer

Supprimer les fichiers inutiles : Dites adieu à tailwind.config.js et postcss.config.js à la racine de votre projet. La v4 s'en passe très bien !

Étape 4 : Installer Tailwind CSS v4 et son Plugin Vite

On installe maintenant la star du jour et son compagnon indispensable pour Vite :

npm install tailwindcss @tailwindcss/vite

Étape 5 : Configurer Vite et le CSS (La partie cruciale)

C'est là que la magie opère. On va dire à Vite d'utiliser le nouveau plugin.

Modifier vite.config.js

Importez le plugin et placez-le avant celui de Laravel. C'est important pour que le traitement des classes se fasse correctement.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'; // L'import indispensable

export default defineConfig({
    plugins: [
        tailwindcss(), 
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Mettre à jour resources/css/app.css

Oubliez les anciennes directives. Dans la v4, on utilise un simple import CSS.

@import "tailwindcss";

/* On indique à Tailwind où chercher les classes pour ne rien oublier */

@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";

@source "../views/**/*.blade.php";

Étape 6 : Lancer le build et admirer le résultat

On finit par installer les dépendances et on lance le serveur de développement :

npm install
npm run dev

Et voilà ! Votre projet Laravel 12 tourne maintenant avec Tailwind CSS v4. Plus besoin de jongler avec des fichiers JS complexes, tout est fluide.

Petit conseil d'ami : Si vous voulez personnaliser votre thème (couleurs, polices), tout se passe désormais dans votre fichier CSS via un bloc @theme. C'est l'approche "CSS-first" de la v4 !

FAQ : Les réponses à vos questions

1. Est-ce que mes composants Breeze existants vont fonctionner ? Oui ! La v4 est largement compatible. Cependant, certaines classes très spécifiques pourraient nécessiter un petit ajustement visuel.

2. Pourquoi supprimer PostCSS ? Tailwind v4 inclut son propre moteur de traitement. Dans la plupart des cas simples, PostCSS n'est plus une dépendance obligatoire pour faire tourner Tailwind.

3. Puis-je quand même garder un fichier tailwind.config.js ? C'est possible pour une transition douce, mais ce n'est pas recommandé. L'objectif de la v4 est de s'en affranchir pour gagner en simplicité.