Intégration de Tailwind CSS avec des frameworks (React, Vue, Laravel)

Introduction

Dans le monde du développement web moderne, la rapidité et l'efficacité sont primordiales. Tailwind CSS s'est imposé comme un framework CSS "utility-first" révolutionnaire, permettant de construire des interfaces utilisateur complexes directement dans votre HTML, sans quitter votre balisage. Cependant, pour exploiter pleinement sa puissance, il est essentiel de savoir comment l'intégrer de manière fluide avec les frameworks JavaScript et PHP les plus populaires.

Cette leçon vise à vous guider pas à pas dans l'intégration de Tailwind CSS avec React, Vue.js et Laravel. Nous explorerons les principes fondamentaux, les étapes d'installation et de configuration spécifiques à chaque écosystème, ainsi que les bonnes pratiques pour optimiser votre flux de travail.

Que vous développiez des applications front-end réactives avec React ou Vue, ou des applications full-stack robustes avec Laravel, cette leçon vous fournira les connaissances nécessaires pour tirer le meilleur parti de Tailwind CSS.

1. Principes Généraux d'Intégration de Tailwind CSS

Avant de plonger dans les spécificités de chaque framework, comprenons les bases de l'intégration de Tailwind CSS.

1.1. Comment fonctionne Tailwind CSS ?

Tailwind CSS ne fournit pas de composants UI préfabriqués. Au lieu de cela, il vous donne une collection de classes utilitaires hautement configurables qui vous permettent de construire des designs personnalisés directement dans votre balisage. Pour ce faire, Tailwind a besoin d'un processus de compilation.

PostCSS : Tailwind CSS est un plugin PostCSS. PostCSS est un outil qui transforme vos CSS avec des plugins JavaScript. C'est le moteur sous-jacent qui permet à Tailwind de fonctionner.
Compilation Just-In-Time (JIT) / Mode Play : Historiquement, Tailwind générait un fichier CSS volumineux que l'on "purifiait" ensuite en production. Avec le moteur JIT (introduit dans Tailwind CSS v2.1 et devenu le moteur par défaut dans v3), Tailwind génère dynamiquement les styles dont vous avez besoin au fur et à mesure que vous les écrivez pendant le développement, et optimise drastiquement la taille du fichier en production.
Fichier de configuration (tailwind.config.js) : C'est le cœur de la personnalisation de Tailwind. Vous y définissez vos couleurs, espacements, typographies, extensions et tous les chemins vers les fichiers qui contiennent des classes Tailwind (HTML, JS, Vue, PHP, etc.).
Fichier de configuration PostCSS (postcss.config.js) : Ce fichier indique à PostCSS quels plugins utiliser. Il inclut généralement tailwindcss et autoprefixer (pour ajouter automatiquement les préfixes vendeurs CSS).

1.2. Étapes Clés de l'Intégration

Quelle que soit la technologie front-end ou back-end que vous utilisez, les étapes fondamentales restent similaires :

Créer un projet : Initialiser un nouveau projet avec votre framework choisi.
Installer les dépendances : Installer Tailwind CSS, PostCSS et Autoprefixer via npm ou Yarn.
Initialiser les fichiers de configuration : Générer tailwind.config.js et postcss.config.js.
Configurer les chemins de purge/content : Indiquer à Tailwind où trouver vos classes HTML/JavaScript/Blade/Vue/React pour qu'il puisse générer les styles nécessaires et purger ceux qui sont inutilisés en production.
Importer les directives Tailwind : Ajouter les directives @tailwind (base, components, utilities) à votre fichier CSS principal.
Intégrer le CSS compilé : S'assurer que votre application charge ce fichier CSS principal.
Compiler le CSS : Utiliser votre outil de build (Vite, Webpack, Laravel Mix, etc.) pour compiler le CSS.

2. Intégration avec React

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. L'intégration de Tailwind CSS avec React est très courante et assez simple, surtout avec les outils de build modernes comme Vite ou Create React App.

2.1. Méthodes d'intégration courantes

Create React App (CRA) : L'outil officiel pour créer des applications React. Il utilise Webpack en interne.
Vite : Un outil de build frontend moderne et rapide qui supporte React nativement (via un plugin). C'est devenu une alternative très populaire à CRA.
Next.js : Un framework React full-stack. Il a sa propre façon d'intégrer Tailwind, souvent plus simple encore.

Nous allons nous concentrer sur l'approche générique qui fonctionne bien avec CRA et Vite, car les étapes sont très similaires.

2.2. Étapes détaillées pour React (CRA/Vite)

Pour cet exemple, nous allons utiliser Vite car il est plus léger et plus rapide pour les nouveaux projets.

2.2.1. Créer un nouveau projet React (avec Vite)

# Pour un projet React simple
npm create vite@latest mon-app-react-tailwind -- --template react

# Ou pour TypeScript
# npm create vite@latest mon-app-react-tailwind -- --template react-ts

cd mon-app-react-tailwind
npm install

2.2.2. Installer Tailwind CSS et ses dépendances

npm install -D tailwindcss postcss autoprefixer

2.2.3. Initialiser Tailwind CSS et PostCSS

Générez les fichiers de configuration tailwind.config.js et postcss.config.js.

npx tailwindcss init -p

Vous devriez maintenant avoir deux nouveaux fichiers à la racine de votre projet : tailwind.config.js et postcss.config.js.

2.2.4. Configurer `tailwind.config.js`

Modifiez le fichier tailwind.config.js pour inclure les chemins de tous vos fichiers React qui contiendront des classes Tailwind.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // Important : Cible tous les fichiers JS, TS, JSX, TSX dans le dossier src
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content: Ce tableau est crucial. Il indique à Tailwind quels fichiers analyser pour trouver les classes utilitaires à inclure dans le bundle final. src/**/*.{js,ts,jsx,tsx} signifie "tous les fichiers avec les extensions .js, .ts, .jsx, .tsx dans le dossier src et ses sous-dossiers".

2.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

Créez un fichier CSS pour Tailwind, par exemple src/index.css (si vous avez un fichier CSS existant, vous pouvez l'utiliser).

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Vous pouvez ajouter vos propres styles personnalisés ici si nécessaire */
body {
  font-family: Arial, sans-serif;
}

Ces trois directives @tailwind sont remplacées par les styles de base de Tailwind, ses composants (si vous en utilisez) et toutes les classes utilitaires générées.

2.2.6. Importer le fichier CSS dans votre application React

Ouvrez votre fichier src/main.jsx (ou src/index.js pour CRA) et importez le fichier CSS que vous venez de créer.

// src/main.jsx (pour Vite)
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // Importez votre fichier CSS Tailwind ici

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

2.2.7. Utiliser Tailwind CSS dans un composant React

Vous pouvez maintenant commencer à utiliser les classes Tailwind directement dans vos composants React.

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md max-w-sm w-full text-center">
        <h1 className="text-3xl font-bold text-blue-600 mb-4">
          Bienvenue sur mon App React + Tailwind!
        </h1>
        <p className="text-gray-700 mb-6">
          Ceci est un paragraphe avec des classes Tailwind.
        </p>
        <button className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
          Cliquez-moi !
        </button>
      </div>
    </div>
  )
}

export default App

2.2.8. Lancer l'application

npm run dev

Votre application React devrait maintenant s'afficher avec les styles Tailwind CSS.

2.3. Bonnes pratiques avec React et Tailwind

Composants réutilisables : Créez des composants React réutilisables qui encapsulent des blocs de UI avec des classes Tailwind. C'est la synergie parfaite entre les deux.

Composition de classes conditionnelles : Utilisez des bibliothèques comme clsx (ou classnames) pour gérer les classes conditionnelles de manière propre.

import clsx from 'clsx';

function Button({ primary, children }) {
  const buttonClasses = clsx(
    'py-2',
    'px-4',
    'rounded',
    {
      'bg-blue-500 hover:bg-blue-700 text-white': primary,
      'bg-gray-200 hover:bg-gray-300 text-gray-800': !primary,
    }
  );

  return (
    <button className={buttonClasses}>
      {children}
    </button>
  );
}

Variables CSS : Pour des valeurs qui changent dynamiquement ou qui sont gérées par React, utilisez des variables CSS avec Tailwind. Par exemple, --my-color dans votre CSS, puis text-[var(--my-color)] dans votre HTML/JSX.

3. Intégration avec Vue.js

Vue.js est un framework JavaScript progressif pour construire des interfaces utilisateur. L'intégration de Tailwind CSS avec Vue est très similaire à celle de React, bénéficiant également des outils de build modernes.

3.1. Méthodes d'intégration courantes

Vue CLI : L'outil officiel pour l'écosystème Vue.js, basé sur Webpack.
Vite : L'outil de build recommandé par Vue pour les nouveaux projets depuis Vue 3.
Nuxt.js : Un framework Vue.js full-stack. Il offre un module @nuxtjs/tailwindcss qui simplifie grandement l'intégration.

Nous allons nous concentrer sur l'approche avec Vite, car c'est la méthode privilégiée pour les nouveaux projets Vue 3.

3.2. Étapes détaillées pour Vue.js (Vite)

3.2.1. Créer un nouveau projet Vue (avec Vite)

# Pour un projet Vue simple
npm create vite@latest mon-app-vue-tailwind -- --template vue

# Ou pour TypeScript
# npm create vite@latest mon-app-vue-tailwind -- --template vue-ts

cd mon-app-vue-tailwind
npm install

3.2.2. Installer Tailwind CSS et ses dépendances

npm install -D tailwindcss postcss autoprefixer

3.2.3. Initialiser Tailwind CSS et PostCSS

Générez les fichiers de configuration tailwind.config.js et postcss.config.js.

npx tailwindcss init -p

Vous devriez maintenant avoir tailwind.config.js et postcss.config.js à la racine de votre projet.

3.2.4. Configurer `tailwind.config.js`

Modifiez le fichier tailwind.config.js pour inclure les chemins de tous vos fichiers Vue qui contiendront des classes Tailwind.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // Important : Cible tous les fichiers Vue, JS, TS, JSX, TSX dans le dossier src
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content: Assurez-vous que *.vue est inclus pour que Tailwind analyse vos Single File Components (SFC).

3.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

Créez un fichier CSS pour Tailwind, par exemple src/assets/main.css.

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Vous pouvez ajouter vos propres styles personnalisés ici si nécessaire */
body {
  font-family: 'Inter', sans-serif;
}

3.2.6. Importer le fichier CSS dans votre application Vue

Ouvrez votre fichier src/main.js (ou src/main.ts) et importez le fichier CSS que vous venez de créer.

// src/main.js
import './assets/main.css' // Importez votre fichier CSS Tailwind ici

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3.2.7. Utiliser Tailwind CSS dans un composant Vue

Vous pouvez maintenant utiliser les classes Tailwind directement dans vos Single File Components (.vue).

<!-- src/App.vue -->
<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-xl max-w-lg w-full text-center">
      <h1 class="text-4xl font-extrabold text-purple-700 mb-6">
        Bienvenue sur mon App Vue + Tailwind !
      </h1>
      <p class="text-gray-800 leading-relaxed mb-8">
        Ceci est une application Vue.js stylisée avec la puissance de Tailwind CSS.
        Les classes utilitaires rendent le styling rapide et intuitif.
      </p>
      <button
        class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
        @click="handleClick"
      >
        En savoir plus
      </button>
    </div>
  </div>
</template>

<script setup>
const handleClick = () => {
  alert('Bouton cliqué !');
};
</script>

<!-- Les styles scoped ne sont pas nécessaires pour Tailwind car il est utility-first -->
<!-- Si vous ajoutez des styles non-Tailwind spécifiques à ce composant, utilisez <style scoped> -->
<style>
/* Global styles or overrides */
</style>

3.2.8. Lancer l'application

npm run dev

Votre application Vue devrait maintenant s'afficher avec les styles Tailwind CSS.

3.3. Bonnes pratiques avec Vue et Tailwind

Classes dynamiques : Utilisez la syntaxe de liaison de classe de Vue (v-bind:class ou simplement :class) pour appliquer des classes Tailwind de manière conditionnelle ou dynamique.

<template>
  <button :class="buttonClasses">
    Mon Bouton
  </button>
</template>

<script setup>
import { ref, computed } from 'vue';

const isActive = ref(true);

const buttonClasses = computed(() => ({
  'bg-blue-500': isActive.value,
  'hover:bg-blue-700': isActive.value,
  'bg-gray-400': !isActive.value,
  'text-white': true,
  'font-bold': true,
  'py-2': true,
  'px-4': true,
  'rounded': true,
}));
</script>

@apply (avec prudence) : La directive @apply de Tailwind vous permet de regrouper des classes utilitaires dans une nouvelle classe CSS. Elle est utile pour des composants très spécifiques ou pour migrer d'une feuille de style existante, mais son utilisation excessive peut annuler les avantages de l'approche utility-first et rendre votre CSS difficile à maintenir. Préférez la composition de composants Vue avec des classes directes.
Isolation CSS (<style scoped>) : Pour les styles non-Tailwind ou les overrides très spécifiques à un composant, utilisez <style scoped>. Tailwind étant utility-first, il n'entre pas en conflit avec l'isolation de styles.

4. Intégration avec Laravel

Laravel est un framework PHP populaire pour construire des applications web robustes. L'intégration de Tailwind CSS avec Laravel est fluide, notamment grâce à ses outils de compilation d'assets comme Vite (par défaut depuis Laravel 9) ou Laravel Mix (traditionnel).

4.1. Méthodes d'intégration courantes

Vite : L'outil de build JavaScript par défaut pour les nouvelles applications Laravel (à partir de Laravel 9 et plus). Il offre une expérience de développement très rapide.
Laravel Mix : Un wrapper autour de Webpack, traditionnellement utilisé dans les projets Laravel plus anciens. Il est toujours pertinent pour la maintenance de projets existants.

Nous allons nous concentrer sur l'approche avec Vite, étant donné qu'il est maintenant le standard pour les nouvelles installations de Laravel.

4.2. Étapes détaillées pour Laravel (avec Vite)

4.2.1. Créer un nouveau projet Laravel

Si vous n'avez pas Laravel installé globalement :

composer create-project laravel/laravel mon-app-laravel-tailwind
cd mon-app-laravel-tailwind

4.2.2. Installer Tailwind CSS et ses dépendances via npm

Laravel inclut déjà Node.js et npm/Yarn, ainsi que Vite, PostCSS et Autoprefixer dans les nouvelles installations. Il ne reste qu'à installer Tailwind CSS.

npm install -D tailwindcss

4.2.3. Initialiser Tailwind CSS et PostCSS

Générez les fichiers de configuration tailwind.config.js et postcss.config.js.

npx tailwindcss init -p

Ces fichiers devraient apparaître à la racine de votre projet.

4.2.4. Configurer `tailwind.config.js`

Modifiez le fichier tailwind.config.js pour inclure les chemins de tous vos fichiers Blade, JavaScript, Vue ou React qui contiendront des classes Tailwind. Laravel stocke généralement les vues dans resources/views.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php", // Cible les fichiers Blade de Laravel
    "./resources/**/*.js",       // Cible les fichiers JavaScript
    "./resources/**/*.vue",      // Cible les fichiers Vue.js (si utilisés)
    "./resources/**/*.jsx",      // Cible les fichiers React.js (si utilisés)
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content: Assurez-vous d'inclure resources/**/*.blade.php pour que Tailwind analyse vos vues Blade.

4.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

Ouvrez le fichier resources/css/app.css (Laravel le crée par défaut) et ajoutez les directives Tailwind.

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ajoutez vos propres styles globaux ici */
body {
  font-family: 'Nunito', sans-serif;
}

4.2.6. Configurer Vite

Laravel est configuré pour utiliser Vite par défaut. Le fichier vite.config.js à la racine du projet gère la compilation des assets. Assurez-vous qu'il inclut bien votre fichier CSS.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // Si vous utilisez React
import vue from '@vitejs/plugin-vue';     // Si vous utilisez Vue

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css', // Votre fichier CSS Tailwind
        'resources/js/app.js'    // Votre fichier JavaScript principal
      ],
      refresh: true,
    }),
    // Activez ces plugins si vous utilisez React ou Vue
    // react(),
    // vue(),
  ],
});

4.2.7. Intégrer le CSS compilé dans les vues Blade

Ouvrez votre layout Blade principal, généralement resources/views/welcome.blade.php ou resources/views/layouts/app.blade.php, et utilisez la directive Blade @vite pour inclure les assets compilés.

{{-- resources/views/welcome.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Tailwind App</title>

    {{-- Importation des styles et scripts compilés par Vite --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased">
    <div class="relative min-h-screen flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <h1 class="text-4xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4">
                        Bienvenue sur Laravel avec Tailwind CSS !
                    </h1>
                    <p class="text-center text-lg text-gray-700 dark:text-gray-300">
                        Construire des interfaces élégantes n'a jamais été aussi simple.
                    </p>
                    <div class="mt-8 flex justify-center space-x-4">
                        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">
                            Première Action
                        </a>
                        <a href="#" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300">
                            Seconde Action
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

4.2.8. Lancer le serveur de développement Vite et Laravel

Ouvrez deux terminaux :

Terminal 1 (pour Vite) :
```
npm run dev
```
Terminal 2 (pour Laravel) :
```
php artisan serve
```

Accédez à l'adresse fournie par php artisan serve (généralement http://127.0.0.1:8000), et vous devriez voir votre application Laravel stylisée avec Tailwind CSS. Pendant le développement, les modifications apportées à vos fichiers Blade ou à vos fichiers CSS seront automatiquement rafraîchies par Vite.

4.3. Bonnes pratiques avec Laravel et Tailwind

Composants Blade : Pour les éléments UI réutilisables, utilisez les composants Blade de Laravel (<x-button>). Vous pouvez y injecter des classes Tailwind via des props.

{{-- resources/views/components/button.blade.php --}}
<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded']) }}>
    {{ $slot }}
</button>

{{-- resources/views/welcome.blade.php (utilisation) --}}
<x-button class="mt-4">Cliquez ici</x-button>
<x-button class="bg-red-500">Danger !</x-button>

Livewire / Inertia.js : Si vous utilisez Livewire ou Inertia.js avec Laravel, les classes Tailwind s'appliquent de la même manière dans vos composants Livewire (fichiers Blade) ou dans vos pages/composants Vue/React (fichiers JS/Vue/JSX) gérées par Inertia. Le processus de build avec Vite ou Mix reste le même.
Production Build : Pour la production, utilisez npm run build (ou npm run prod avec Mix). Vite ou Mix s'occupera d'optimiser le fichier CSS, y compris la purge des classes Tailwind inutilisées, ce qui réduit considérablement la taille du fichier final.

Conclusion

L'intégration de Tailwind CSS avec des frameworks modernes comme React, Vue.js et Laravel est non seulement possible, mais aussi hautement recommandée pour la plupart des projets. Grâce à sa philosophie "utility-first" et à la puissance des outils de build JavaScript (Vite, Webpack, PostCSS), vous pouvez créer des interfaces utilisateur réactives et visuellement cohérentes avec une vitesse de développement impressionnante.

Chaque framework a ses spécificités dans la configuration de son système de build, mais les principes fondamentaux de l'intégration de Tailwind restent les mêmes :

Installation des dépendances (tailwindcss, postcss, autoprefixer).
Configuration de tailwind.config.js pour indiquer les fichiers à analyser.
Importation des directives @tailwind dans un fichier CSS principal.
Intégration de ce fichier CSS dans le point d'entrée de votre application.
Utilisation d'un outil de build (Vite, Laravel Mix, etc.) pour la compilation.

En maîtrisant ces étapes, vous serez en mesure d'exploiter pleinement la flexibilité et l'efficacité de Tailwind CSS, améliorant ainsi votre productivité et la qualité de vos projets web. N'hésitez pas à expérimenter et à personnaliser votre configuration Tailwind pour l'adapter aux besoins spécifiques de vos applications.

Intégration de Tailwind CSS avec des frameworks (React, Vue, Laravel)

Introduction

1. Principes Généraux d'Intégration de Tailwind CSS

1.1. Comment fonctionne Tailwind CSS ?

1.2. Étapes Clés de l'Intégration

2. Intégration avec React

2.1. Méthodes d'intégration courantes

2.2. Étapes détaillées pour React (CRA/Vite)

2.2.1. Créer un nouveau projet React (avec Vite)

2.2.2. Installer Tailwind CSS et ses dépendances

2.2.3. Initialiser Tailwind CSS et PostCSS

2.2.4. Configurer tailwind.config.js

2.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

2.2.6. Importer le fichier CSS dans votre application React

2.2.7. Utiliser Tailwind CSS dans un composant React

2.2.8. Lancer l'application

2.3. Bonnes pratiques avec React et Tailwind

3. Intégration avec Vue.js

3.1. Méthodes d'intégration courantes

3.2. Étapes détaillées pour Vue.js (Vite)

3.2.1. Créer un nouveau projet Vue (avec Vite)

3.2.2. Installer Tailwind CSS et ses dépendances

3.2.3. Initialiser Tailwind CSS et PostCSS

3.2.4. Configurer tailwind.config.js

3.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

3.2.6. Importer le fichier CSS dans votre application Vue

3.2.7. Utiliser Tailwind CSS dans un composant Vue

3.2.8. Lancer l'application

3.3. Bonnes pratiques avec Vue et Tailwind

4. Intégration avec Laravel

4.1. Méthodes d'intégration courantes

4.2. Étapes détaillées pour Laravel (avec Vite)

4.2.1. Créer un nouveau projet Laravel

4.2.2. Installer Tailwind CSS et ses dépendances via npm

4.2.3. Initialiser Tailwind CSS et PostCSS

4.2.4. Configurer tailwind.config.js

4.2.5. Créer un fichier CSS principal et y ajouter les directives Tailwind

4.2.6. Configurer Vite

4.2.7. Intégrer le CSS compilé dans les vues Blade

4.2.8. Lancer le serveur de développement Vite et Laravel

4.3. Bonnes pratiques avec Laravel et Tailwind

Conclusion

2.2.4. Configurer `tailwind.config.js`

3.2.4. Configurer `tailwind.config.js`

4.2.4. Configurer `tailwind.config.js`