Catégories
Laravel

Configurer Laravel avec Tailwind

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.

Abonnement unique O2Switch à 5€/mois

Par HappyToDev

Absolument passionné depuis toujours par l'informatique et la programmation, je souhaite via ce blog vous faire passer un peu du savoir que j'ai accumulé depuis des années.
Et même, pourquoi pas, vous aider à faire le premier pas dans le développement web.

Vous êtes prêts ?
Alors allons y ensemble et n'oubliez pas que les débutants sont vraiment les bienvenus.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.