Tailwind CSS + Laravel, ou comment se réconcilier avec le CSS
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 elles 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
- Créez le fichier de configuration Tailwind CSS
- Créez le fichier de configuration PostCSS
-
Ajoutez les directives
@tailwind - Dites au compilateur JIT où regarder
- Codez !
Installez le package
Installez Tailwind CSS via NPM :
npm i --save-dev tailwindcss autoprefixerLe 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 i --save-dev postcssCréez le fichier de configuration Tailwind CSS
Le fichier de configuration de Tailwind CSS vous permettra d’ajouter de nouvelles valeurs, plugins et plus encore. C’est une pièce essentielle que vous pouvez créer grâce à la commande suivante :
npx tailwind initCréez le fichier de configuration PostCSS
Créez un fichier postcss.config.js et déclarez les plugins Tailwind CSS et Autoprefixer.
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },}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.
Importez le CSS :
<!DOCTYPE html><html> <head> … @vite(['resources/css/app.css']) </head> <body> … </body></html>Demandons ensuite à Tailwind de surveiller le moindre changement que nous faisons dans les fichiers que nous avons configurés à l’étape précédente :
npm run devPuis commencez à styler votre HTML ! Exemple :
<button class="bg-blue-400 font-bold px-4 py-3 rounded text-white"> Envoyer</button>
0 commentaire
Inscrivez-vous ou connectez-vous d'abord.