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 !

Most CSS frameworks do too much.

They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

Sur la page officielle de Tailwind
Oui ok, c’est un gros pavé et plutôt une grosse 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.

Tu souhaite créer ton premier site avec Laravel et comprendre comment fonctionne ce framework ?
Je te propose de rejoindre ma formation qui parle exactement de cela !
Et comme je sais que tu es un lecteur assidu de ce blog, je t’offre 5% de réduction sur cette formation (avec le coupon ALDEW5).Tu hésites ? Je te comprends et je souhaite te préciser deux choses :

1. Mes élèves sont ma meilleure carte de visite :

Voici ce qu’ils pensent de cette formation

24/06/2020
Vraiment très bien conçu et dispensé. Le rythme est bon, clair, précis donc essentiel à une bonne compréhension. Les réponses aux questions sont dans le même esprit, donc … Un grand merci à Frédéric pour ce cours de qualité. Vivement le prochain !!

17/06/2020
Très bon cours ! Clair même pour un débutant (qui a des bases quand même). Formateur sympa 😉 vivement d’autre cours.

Retrouve tous les avis, sur la page de la formation 😉

2. Le prix est vraiment mini !
Le cours est à 25€ en prix normal et avec le coupon ALDEW5, il te revient à 23,75€ pour plus de 4h de formation !

Alors à tout de suite de l’autre côté, je l’espère !