Comment installer et utiliser Tailwind CSS avec Laravel et Mix
Publié le par Benjamin Crozat
Temps de lecture estimé : 2 minutes
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 tailwindcssLe 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-devCré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 initConfigurez 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 watchEnfin, 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
Inscrivez-vous ou connectez-vous d'abord.