Installer et configurer Tailwindcss v3 sur Laravel

Introduction

Dans cet article, nous allons voir comment installer et configurer TailwindCSS v3 dans un projet Laravel. Si vous avez déjà essayé et rencontré des problèmes, nous espérons que cet article les résoudra pour vous.

La nouvelle version de Tailwindcss vient avec beaucoup de nouvelles fonctionnalités nous en parlons dans cet article. Nous allons directement plonger dans la pratique.

Installation de Laravel (optionnel)

Si vous avez déjà un projet Laravel disponible, vous pouvez sauter directement à la section suivante.

Pour démarrer un nouveau projet Laravel nous pouvons le faire soit en utilisant composer soit en utilisant laravel installer. Dans ce tutoriel nous allons utiliser la deuxième méthode

laravel new tailwind-config --git

Pour en savoir plus sur l'installation de Laravel consulter la documentation

Installation de Tailwind

Il y'a plusieurs façons d'installer ou d'utiliser Tailwindcss dans son projet

CDN
NPM (ou Yarn)

Pour installer Tailwind, il vous suffit d'exécuter la commande suivante :

yarn add -D tailwindcss postcss autoprefixer

Configuration de Tailwind

Maintenant que nous avons installé Tailwind, nous pouvons exécuter la commande suivante pour créer un fichier de configuration tailwind.config.js :

npx tailwindcss init

Vous devriez maintenant avoir un tailwind.config.js qui ressemble à ceci :

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Consultez la documentation de TailwindCSS pour les configurations disponibles ici.

Configuration de Laravel Mix

Vous devez maintenant indiquer à Laravel que vous souhaitez compiler les ressources Tailwind à l'aide de Laravel Mix. Ouvrez le fichier webpack.mix.js (situé à la racine de votre application) et incluez tailwindcss comme plugin postCss. Voici à quoi devrait ressembler votre webpack.mix.js lorsque vous aurez terminé :

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

Ensuite, vous devez mettre à jour votre fichier tailwind.config.js pour inclure les chemins d'accès à toutes vos ressources (vues). L'exemple suivant inclura tous les vues blade et les fichiers JS dans votre dossier de ressources :

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

L'étape suivante consiste à importer toutes les composants @tailwindcss dans le CSS de votre application. Ouvrez le fichier resources/css/app.css et incluez le contenu suivant :

@tailwind base
@tailwind components
@tailwind utilities

La configuration est terminée. Vous pouvez maintenant exécuter la commande qui permettra d'observer tous les changements dans vos ressources (vues) en temps réel pendant que vous développez votre application :

yarn run watch

Nous aurons le résultat suivant :

Screenshot from 2022-01-07 02-00-11.png

Assurez-vous que votre CSS compilé est inclus dans le puis commencez à utiliser les classes utilitaires de Tailwind pour styliser votre contenu.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Configuration</title>
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Bienvenu sur <span class="text-sky-600">Tailwindcss v3.0</span>!
  </h1>
</body>
</html>

Et enfin nous avons notre résultat

Screenshot from 2022-01-07 02-14-13.png

Félicitations 🎉, vous avez maintenant installé Tailwind, prêt à être utilisé dans votre projet !

Le code source est disponible sur Github - laravelcm/tailwind-config

#Introduction

#Installation de Laravel (optionnel)

#Installation de Tailwind

#Configuration de Tailwind

#Configuration de Laravel Mix

Introduction

Installation de Laravel (optionnel)

Installation de Tailwind

Configuration de Tailwind

Configuration de Laravel Mix