Utiliser Tailwindcss avec Laravel

laravel tailwindcss October 20, 2019

Prerequis: Savoir Installer Laravel.

Il y a plusieurs moyens d'installer tailwindcss sur un projet Laravel:

Depuis le CDN (Content Delivery Network)
Depuis le package manager (NPM, YARN)

Nous allons voir ces 2 méthodes en détails.

Methode 1: Depuis le CDN

Avant d'utiliser la version CDN, il faut savoir que bon nombre des fonctionnalités qui rendent tailwindcss génial ne sont pas disponibles sans l'intégration de Tailwind dans le build process. Vous ne pourrez donc pas :

Personnaliser le theme par defaut.
Utiliser aucune directive comme @apply, @variants, etc.
Activer certaines fonctionnalités comme group-hover.
Installer de plugins tiers

Dans le layout de votre view vous devez import le css de tailwind.

<head>
    ...
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    ...
</head>

Methode 2: Depuis Le Package Manager (NPM, YARN)

Pour la plupart des projets (et pour tirer parti des fonctionnalités de personnalisation de Tailwind), vous devrez installer Tailwind via npm ou yarn .

# Utilisant npm  
npm  install tailwindcss 

# Utilisant Yarn  
yarn  add tailwindcss

Après installation, utiliser @import directive pour injecter les styles: base, components et utilities dans votre css (Notamment, le fichier situé dans le dossier app.scss.

// resources/sass/app.scss

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Par defaut, Laravel est founi avec Laravel Mix.

Laravel Mix est un wrapper élégant autour de Webpack qui fournit une API fluide permettant de définir les étapes de build de Webpack pour votre application Laravel à l'aide de plusieurs pré-processeurs CSS et Javascript courants.

Dans le racine du Projet, il existe un fichier webpack.mix.js qui permette de configurer laravel mix;
Ajouter l'option:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
        postCss: [
            tailwindcss('tailwind.config.js')
        ]
    }).browserSync();

Lancer la commande watch pour processer le build.

# Utilisant Npm
npm run watch

# Utilisant Yarn
yarn watch

Importer le fichier css generer par Laravel Mix dans votre layout:

<head>
    ...
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    ...
</head>

Et c'est tout .