Chaque site web Laravel a besoin d’un peu de style, et Tailwind CSS est le moyen le plus simple de donner du style à votre site. Ce framework CSS utilitaire offre des classes prédéfinies pour styliser vos éléments HTML. Au lieu d’écrire un code CSS interminable, vous pouvez créer rapidement des pages web personnalisées, puis maintenir et faire évoluer facilement vos feuilles de style.
Tailwind fait partie de la pile TALL, avec Alpine.js et Livewire. La communauté Laravel a conçu cette solution de développement complète pour aider les développeurs de tous niveaux à créer rapidement des prototypes d’applications web. Ces solutions sont faciles à utiliser sans connaissances approfondies des technologies frontend ou backend.
Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le déployer à l’aide de MyKinsta.
Améliorez votre projet Laravel à l’aide de Tailwind
Pour commencer, créez une page Laravel de base, puis utilisez Tailwind CSS pour la styliser avec un minimum d’effort.
Pré-requis
Pour suivre ce tutoriel, vous avez besoin de :
- Laravel et Composer installés.
- Node.js et npm installés.
- Un compte MyKinsta pour le déploiement. Si vous n’avez pas encore de compte, inscrivez-vous pour un essai gratuit.
Pour voir le projet final, consultez le code complet du projet.
Projet Laravel et configuration de Tailwind
Pour créer un nouveau projet Laravel à l’aide de Composer :
- Ouvrez le terminal jusqu’au répertoire où vous voulez que le projet vive et s’exécute :
composer create-project laravel/laravel my-project- Allez dans le répertoire my-project pour installer les paquets nécessaires :
cd my-project- Installez les paquets nécessaires pour travailler avec Tailwind :
npm install -D tailwindcss postcss autoprefixer- Exécutez la commande suivante pour configurer les fichiers de configuration de Tailwind :
npx tailwindcss init -pCette action place deux fichiers à la racine de votre projet : tailwind.config.js et postcss.config.js.
Configurez les chemins de vos modèles
- Ensuite, configurez les chemins de votre modèle dans le fichier tailwind.config.js. Par défaut, Laravel recherche les fichiers CSS dans le répertoire public. Le chemin du modèle indique à Laravel où trouver les fichiers CSS de l’application.
- Remplacez le code à l’intérieur du fichier tailwind.config.js par ceci :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}Ajoutez les directives CSS de Tailwind au CSS du projet
- Pour ajouter les directives Tailwind CSS, allez dans le dossier resources/css et ouvrez le fichier app.css.
- Ajoutez ensuite le code suivant :
@tailwind base;
@tailwind components;
@tailwind utilities;
Construisez l’application
Avant d’exécuter votre application localement :
- Lancez le serveur de développement Vite :
npm run devCette commande regroupe votre fichier de ressources statiques, y compris Tailwind CSS, et démarre le serveur local Vite.
- Utilisez Artisan pour exécuter votre application Laravel :
php artisan serveVotre application devrait maintenant fonctionner à l’adresse http://127.0.0.1:8000/. Elle affiche la sortie par défaut d’une application Laravel nouvellement créée.
En ouvrant le fichier de vue de la route resources/views/welcome.blade.php, vous pouvez voir qu’il utilise déjà des classes utilitaires Tailwind.
Comment créer un composant Tailwind simple
Pour mieux comprendre le fonctionnement de Tailwind :
- Ouvrez le fichier resources/views/welcome.blade.php.
- Supprimez le code de la vue de bienvenue de l’application.
- Remplacez-le par le code ci-dessous, qui rend un magnifique composant de carte :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
<title>Document</title>
</head>
<body>
<div class="max-w-md m-24 rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
<div class="px-6 py-4">
<h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
<p class="mt-3 text-gray-600 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
exercitationem praesentium nihil.
</p>
<button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
Read More
</button>
</div>
</div>
</body>
</html>Le code ci-dessus utilise Vite pour importer le fichier app.css via @vite('resources/css/app.css'). Il importe également Tailwind. Il crée un composant de balisage fondamental pour simuler une carte de blog à l’aide des classes utilitaires CSS de Tailwind :
max-w-sm– Définit la largeur maximale du conteneur à la taille du point de terminaison sm (small).m-24– Ajoute une marge de 24 unités (96px ou 6rem) à tous les côtés du conteneur.rounded– Ajoute un arrondi de bordure pour arrondir les angles du conteneur.overflow-hidden– Masque tout contenu qui déborde du conteneur.shadow-lg– Ajoute un effet d’ombre au conteneur.w-full– Définit la largeur de l’image à 100 % de son conteneur.px-6 py-4– Ajoute une marge intérieure de 6 unités (24px ou 1.5rem) sur l’axe des x et de 4 unités (16px ou 1rem) sur l’axe des y.font-bold– Définit la graisse de police du texte en gras.text-xl– Définit la taille de la police du texte sur extra-large.mb-2– Ajoute une marge inférieure de 2 unités (0,5rem ou 8px) à l’élément.text-gray-600– Définit la couleur du texte en gris foncé.text-base– Définit la taille de la police du texte sur la valeur par défaut.
Lorsque vous prévisualisez votre application dans le navigateur, vous devriez voir un résultat similaire à celui ci-dessous.
Déployer votre projet Laravel Tailwind sur Kinsta
Avant de déployer et d’héberger votre application Laravel avec Kinsta, apportez quelques modifications supplémentaires pour vous assurer qu’elle fonctionne correctement lorsqu’elle est hébergée.
- Ouvrez app/Http/Middleware/TrustProxies.php. Changez la valeur de
protected $proxiespour permettre à votre application Laravel de faire confiance à tous les proxys :
protected $proxies = '*';- Créez un nouveau fichier .htaccess dans le répertoire racine de votre projet et collez le code suivant :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>- Créez un nouveau dépôt Git et transférez-y votre code (Kinsta prend en charge le transfert depuis GitHub, GitLab et Bitbucket).
- Connectez-vous à votre compte Kinsta ou créez-en un nouveau. Une fois sur votre tableau de bord MyKinsta, cliquez sur le bouton Ajouter un service, puis sélectionnez Application, comme dans la capture d’écran ci-dessous.
MyKinsta vous invite à connecter votre compte Git. Complétez l’autorisation comme demandé, puis sélectionnez le projet que vous avez précédemment poussé dans votre dépôt et la branche que vous voulez utiliser.
- Ajoutez votre Laravel
APP_KEYdans la section Variables d’environnement. La clé se trouve dans le fichier .env de votre répertoire de projet local.
- Cliquez sur Continuer et sélectionnez l’environnement de construction en fonction de vos préférences.
- Laissez la commande de démarrage dans la section Ressources vide pour l’instant, puis cliquez sur Continuer pour poursuivre.
- Enfin, complétez les informations de paiement. Le déploiement commence immédiatement.
Vous avez besoin de deux build packs pour faire fonctionner votre application correctement : PHP pour exécuter les commandes php, et Node.js, pour exécuter les commandes npm. Pour cela, procédez comme suit
- Accédez à votre application et, dans la navigation de gauche, cliquez sur Paramètres.
- Cliquez sur Ajout de buildpack et ajoutez les build packs pour Node.js et PHP. Cependant, assurez-vous que le build pack PHP est ajouté en dernier dans la séquence, car il s’agit d’une application basée sur PHP.
- Cliquez sur le bouton Déployer maintenant qui apparait après avoir ajouté les nouveaux build packs, comme illustré dans l’image ci-dessous.
- Enfin, allez dans l’onglet Processus de votre application, modifiez le processus Web par défaut et remplacez sa commande Start par ce qui suit :
npm run build && heroku-php-apache2
Après avoir mis à jour la commande de démarrage, votre application sera automatiquement redéployée avec la nouvelle commande. Une fois le déploiement réussi, vous pouvez visiter le domaine pour voir le magnifique composant de carte que vous avez créé et commencer à tester et à développer votre application.
Résumé
Tailwind vous aide à faire passer votre projet Laravel du stade de simple base à celui de projet parfaitement époustouflant. Il est facile à utiliser et vous évite de taper d’énormes piles de code juste pour obtenir l’apparence que vous souhaitez.
Maintenant que vous connaissez les bases, explorez les capacités de Tailwind pour améliorer l’apparence de votre application avec des polices fantaisistes et des effets enchanteurs. Ensuite, déployez-la à l’aide de MyKinsta pour permettre au monde entier d’apprécier votre application.
Laisser un commentaire