Comment installer et utiliser Tailwind CSS avec Laravel et Mix

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 2 minutes

Tailwind CSS déchaine les passions. Certains l’adorent, certains le détestent. Découvrez comment l’intégrer à votre projet Laravel.

Tailwind CSS est un framework CSS utilisant le concept des classes utilitaires. Il y en a pour quasiment tout et peuvent être combinées ensemble afin de concevoir des interfaces web rapidement sans avoir à vous soucier de l’organisation de vos fichiers ou du nommage de vos classes.

Installez le package

Installez Tailwind CSS via NPM :

npm install tailwindcss

Le framework dépend de PostCSS. Assurez-vous qu’il est installé également (normalement, toute nouvelle installation de Laravel l’intègre par défaut) :

npm install postcss --save-dev

Créez le fichier de configuration

Le fichier de configuration de Tailwind vous permettra d’ajouter de nouvelles valeurs au framework et plus encore. C’est une pièce essentielle que vous pouvez créer grâce à la commande suivante :

npx tailwind init

Configurez Laravel Mix

Dans webpack.mix.js, demandez à PostCSS d’utiliser le plugin.

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

Ajoutez les directives @tailwind

Dans resources/css/app.css, nous devons demander à PostCSS d’intégrer tous les styles que génèrera le compilateur Just-in-Time de Tailwind. D’abord les styles de base, ensuite les composants (tel que .container par exemple), puis toutes les classes utilitaires que nous connaissons bien.

@tailwind base;
@tailwind components;
@tailwind utilities;

Dites au compilateur JIT où regarder

Maintenant, précisons quels sont les types de fichiers utilisant Tailwind dans tailwind.config.js

module.exports = {
content: [
"./resources/views/**/*.blade.php",
],
 
}

Codez !

Passons enfin au plus intéressant et demandons à Tailwind de surveiller le moindre changement que nous faisons dans les fichiers que nous avons configurés à l’étape précédente :

npm run watch

Enfin, importez le CSS :

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

Puis commencez à styler votre HTML ! Exemple :

<button class="bg-blue-400 font-bold px-4 py-3 rounded text-white">
Envoyer
</button>

Bonus : évitez les problèmes de cache

Afin d’éviter que votre navigateur vous serve une version mise en cache de votre CSS (que vous soyez en local ou en production), ajoutez ceci dans votre webpack.mix.js:

mix.version()

En coulisse, Laravel Mix ajoutera une query string à la fin de l’URL de votre feuille de style afin que votre navigateur ne puise pas dans son cache.

0 commentaire

Besoin d'aide ? Envie de partager ?
Inscrivez-vous ou connectez-vous d'abord.

Ça vous a plu ?
Abonnez-vous à la newsletter !

Recevez régulièrement news, trucs et astuces à propos de Laravel et son ecosystème.

Autres articles à lire