Tailwind CSS + Laravel, ou comment se réconcilier avec le CSS

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 2 minutes

Tailwind CSS est l'incarnation du pragmatisme. Intégrez-le à votre projet Laravel avec Vite et bénéficiez d'une meilleure maintenabilité.

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.

  1. Installez le package
  2. Créez le fichier de configuration Tailwind CSS
  3. Créez le fichier de configuration PostCSS
  4. Ajoutez les directives @tailwind
  5. Dites au compilateur JIT où regarder
  6. Codez !

Installez le package

Installez Tailwind CSS via NPM :

npm i --save-dev tailwindcss autoprefixer

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 i --save-dev postcss

Cré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 init

Cré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 dev

Puis commencez à styler votre HTML ! Exemple :

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

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