Bon tu en as marre de Bootstrap ? Tu as envie de changer d’air ? Et pourquoi tu n’utiliserai pas Tailwind CSS, qui plus est, couplé avec un petit Laravel 6 ? Hum ? Tu es partant, ok, alors remontes tes manches, on se fait ça en deux coups de cuillères à pot !
Bon t’es gentil Aldew, mais c’est quoi Tailwind CSS ?
Bande de petits curieux ! Alors déjà tailwind en anglais cela signifie vent arrière. ça c’était pour le point culture générale ! 😀
Le parti pris de Tainwind CSS c’est de dire que les autres frameworks CSS en font des tonnes. Allez hop, un petit pavé dans la mare !
Tailwind se présente, quant à lui, comme un framework CSS de bas niveau, disposant de toutes les options dont vous pourriez avoir besoin sans jamais rien ne vous imposer.
Dis comme cela, cela à l’air sympa.
Et Laravel dans tout ça ?
Et bien Laravel – qui vient de sortir en version 6.11 – de son côté utilise par défaut Bootstrap.
Nous allons voir à présent comment mettre en place Tailwind CSS dans un projet Laravel et comme cela on pourra coder avec les cheveux dans le vent !
Bon je te rassure tout ce que l’on va voir est dans la doc ou presque. Comme toujours, et je ne le recommanderai jamais assez, RTFM !
Etape 1 – Tu crées ton nouveau projet Laravel
Je ne vais pas détailler ici cette étape car le travail a déjà été fait dans cet article. Allez file ! Et tu reviens seulement une fois que tes devoirs sont faits…
Etape 2 – Tu installes Tailwind CSS
Easy, peasy comme dirait Bob Newby !
Un petit coup de :
npm install tailwindcss
On laisse faire l’ordi et au bout de quelques secondes ou minutes, cela dépends de ta connexion, tailwind est installé.
Next !
Etape 2 : ouvres ton fichier app.scss
Et tu remplaces son contenu par ceci :
@tailwind base;
@tailwind components;
@tailwind utilities;
Cela va importer tout ce que tu pourras avoir besoin pour construire des designs de page.
Etape 3 : Tu vas créer le fichier de config de Tailwind
Ce fichier que nous allons créer sera utilisé par Laravel Mix pour construire le fichier CSS à partir des fichiers SCSS.
A la racine de ton projet, lance la commande suivante :
npx tailwind init
Si tout se passe bien, tu dois te retrouver avec un fichier tailwind.config.js
à la racine de ton projet Laravel.
Etape 4 : Tu configures ton fichier webpack.mix.js
Pour cela tu ouvres avec ton IDE favori, le fichier webpack.mix.js présent à la racine de ton projet.
Tu remplaces l’existant par le code ci-dessous :
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [tailwindcss('./tailwind.config.js')],
});
Petite explication sur le paramètre ‘options’
postCss
postCss
vous permet d’indiquer à Laravel Mix qu’il devra utiliser Tailwind CSS pour transformer les fichiers scss en css.
Si tu n’as pas compris, ce n’est pas très grave, mais dis le moi dans les commentaires afin que je fasse une explication plus détaillée. Je ne veux laisser personne au bord de la route.
Etape 5 : tu build et tu run !
On y est presque, il ne reste plus qu’à lancer en ligne de commande :
npm install
npm run watch
Et voilà, cela doit fonctionner à présent, Bootstrap a été remplacé par Tailwind. A toi à présent de faire des merveilles à partir de la documentation plutôt bien fournie de Tailwind CSS.