{"id":71748,"date":"2023-08-07T17:27:14","date_gmt":"2023-08-07T16:27:14","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=71748&#038;preview=true&#038;preview_id=71748"},"modified":"2023-11-03T04:00:18","modified_gmt":"2023-11-03T03:00:18","slug":"laravel-tailwind-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/","title":{"rendered":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel"},"content":{"rendered":"<p>Chaque site web Laravel a besoin d&rsquo;un peu de style, et <a href=\"https:\/\/kinsta.com\/fr\/blog\/tailwind-css\/\">Tailwind CSS est le moyen le plus simple de donner du style \u00e0 votre site<\/a>. Ce framework CSS utilitaire offre des classes pr\u00e9d\u00e9finies pour styliser vos \u00e9l\u00e9ments HTML. Au lieu d&rsquo;\u00e9crire un code CSS interminable, vous pouvez cr\u00e9er rapidement des pages web personnalis\u00e9es, puis maintenir et faire \u00e9voluer facilement vos feuilles de style.<\/p>\n<p>Tailwind fait partie de la <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">pile TALL<\/a>, avec Alpine.js et Livewire. La communaut\u00e9 Laravel a con\u00e7u cette solution de d\u00e9veloppement compl\u00e8te pour aider les d\u00e9veloppeurs de tous niveaux \u00e0 cr\u00e9er rapidement des prototypes d&rsquo;applications web. Ces solutions sont faciles \u00e0 utiliser sans connaissances approfondies des technologies frontend ou backend.<\/p>\n<p>Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l&rsquo;aide de MyKinsta.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Am\u00e9liorez votre projet Laravel \u00e0 l&rsquo;aide de Tailwind<\/h2>\n<p>Pour commencer, cr\u00e9ez une page Laravel de base, puis utilisez Tailwind CSS pour la styliser avec un minimum d&rsquo;effort.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Pour suivre ce tutoriel, vous avez besoin de :<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> et <a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> install\u00e9s.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> et npm install\u00e9s.<\/li>\n<li>Un compte <a href=\"https:\/\/my.kinsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> pour le d\u00e9ploiement. Si vous n&rsquo;avez pas encore de compte, inscrivez-vous <a href=\"https:\/\/kinsta.com\/fr\/inscription\/?product_type=app-db\">pour un essai gratuit<\/a>.<\/li>\n<\/ul>\n<p>Pour voir le projet final, consultez le <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">code complet du projet<\/a>.<\/p>\n<h2>Projet Laravel et configuration de Tailwind<\/h2>\n<p>Pour cr\u00e9er un nouveau projet Laravel \u00e0 l&rsquo;aide de Composer :<\/p>\n<ol start=\"1\">\n<li>Ouvrez le terminal jusqu&rsquo;au r\u00e9pertoire o\u00f9 vous voulez que le projet vive et s&rsquo;ex\u00e9cute :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>Allez dans le r\u00e9pertoire <strong>my-project<\/strong> pour installer les paquets n\u00e9cessaires :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Installez les paquets n\u00e9cessaires pour travailler avec Tailwind :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>Ex\u00e9cutez la commande suivante pour configurer les fichiers de configuration de Tailwind :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Cette action place deux fichiers \u00e0 la racine de votre projet : <strong>tailwind.config.js<\/strong> et <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Configurez les chemins de vos mod\u00e8les<\/h2>\n<ol start=\"1\">\n<li>Ensuite, configurez les chemins de votre mod\u00e8le dans le fichier <strong>tailwind.config.js<\/strong>. Par d\u00e9faut, Laravel recherche les fichiers CSS dans le r\u00e9pertoire public. Le chemin du mod\u00e8le indique \u00e0 Laravel o\u00f9 trouver les fichiers CSS de l&rsquo;application.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Remplacez le code \u00e0 l&rsquo;int\u00e9rieur du fichier <strong>tailwind.config.js<\/strong> par ceci :<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\ncontent: [\n\".\/resources\/**\/*.blade.php\",\n\".\/resources\/**\/*.js\",\n\".\/resources\/**\/*.vue\",\n],\ntheme: {\nextend: {},\n},\nplugins: [],\n}<\/code><\/pre>\n<h2>Ajoutez les directives CSS de Tailwind au CSS du projet<\/h2>\n<ol start=\"1\">\n<li>Pour ajouter les directives Tailwind CSS, allez dans le dossier <strong>resources\/css<\/strong> et ouvrez le fichier <strong>app.css.<\/strong><\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Ajoutez ensuite le code suivant :<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>Construisez l&rsquo;application<\/h2>\n<p>Avant d&rsquo;ex\u00e9cuter votre application localement :<\/p>\n<ol start=\"1\">\n<li>Lancez le serveur de d\u00e9veloppement Vite :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Cette commande regroupe votre fichier de ressources statiques, y compris Tailwind CSS, et d\u00e9marre le serveur local Vite.<\/p>\n<ol start=\"2\">\n<li>Utilisez Artisan pour ex\u00e9cuter votre application Laravel :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Votre application devrait maintenant fonctionner \u00e0 l&rsquo;adresse <code>http:\/\/127.0.0.1:8000\/<\/code>. Elle affiche la sortie par d\u00e9faut d&rsquo;une application Laravel nouvellement cr\u00e9\u00e9e.<\/p>\n<p>En ouvrant le fichier de vue de la route <strong>resources\/views\/welcome.blade.php<\/strong>, vous pouvez voir qu&rsquo;il utilise d\u00e9j\u00e0 des classes utilitaires Tailwind.<\/p>\n<h2>Comment cr\u00e9er un composant Tailwind simple<\/h2>\n<p>Pour mieux comprendre le fonctionnement de Tailwind :<\/p>\n<ol start=\"1\">\n<li>Ouvrez le fichier <strong>resources\/views\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Supprimez le code de la vue de bienvenue de l&rsquo;application.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Remplacez-le par le code ci-dessous, qui rend un magnifique composant de carte :<\/li>\n<\/ol>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n      @vite('resources\/css\/app.css')\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"max-w-md  m-24 rounded overflow-hidden shadow-lg\"&gt;\n      &lt;img class=\"w-full\" src=\"https:\/\/picsum.photos\/400\/300\" alt=\"Blog Image\"&gt;\n      &lt;div class=\"px-6 py-4\"&gt;\n        &lt;h2 class=\"font-bold text-2xl mb-2\"&gt;This is My Blog Title&lt;\/h2&gt;\n        &lt;p class=\"mt-3 text-gray-600 text-base\"&gt;\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,\n                exercitationem praesentium nihil.\n        &lt;\/p&gt;\n        &lt;button class=\"mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded\"&gt;\n            Read More\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Le code ci-dessus utilise Vite pour importer le fichier <strong>app.css<\/strong> via <code>@vite('resources\/css\/app.css')<\/code>. Il importe \u00e9galement Tailwind. Il cr\u00e9e un composant de balisage fondamental pour simuler une carte de blog \u00e0 l&rsquo;aide des classes utilitaires CSS de Tailwind :<\/p>\n<ul>\n<li><code>max-w-sm<\/code> &#8211; D\u00e9finit la largeur maximale du conteneur \u00e0 la taille du point de terminaison sm (small).<\/li>\n<li><code>m-24<\/code> &#8211; Ajoute une marge de 24 unit\u00e9s (96px ou 6rem) \u00e0 tous les c\u00f4t\u00e9s du conteneur.<\/li>\n<li><code>rounded<\/code> &#8211; Ajoute un arrondi de bordure pour arrondir les angles du conteneur.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Masque tout contenu qui d\u00e9borde du conteneur.<\/li>\n<li><code>shadow-lg<\/code> &#8211; Ajoute un effet d&rsquo;ombre au conteneur.<\/li>\n<li><code>w-full<\/code> &#8211; D\u00e9finit la largeur de l&rsquo;image \u00e0 100 % de son conteneur.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; Ajoute une marge int\u00e9rieure de 6 unit\u00e9s (24px ou 1.5rem) sur l&rsquo;axe des x et de 4 unit\u00e9s (16px ou 1rem) sur l&rsquo;axe des y.<\/li>\n<li><code>font-bold<\/code> &#8211; D\u00e9finit la graisse de police du texte en gras.<\/li>\n<li><code>text-xl<\/code> &#8211; D\u00e9finit la taille de la police du texte sur extra-large.<\/li>\n<li><code>mb-2<\/code> &#8211; Ajoute une marge inf\u00e9rieure de 2 unit\u00e9s (0,5rem ou 8px) \u00e0 l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><code>text-gray-600<\/code> &#8211; D\u00e9finit la couleur du texte en gris fonc\u00e9.<\/li>\n<li><code>text-base<\/code> &#8211; D\u00e9finit la taille de la police du texte sur la valeur par d\u00e9faut.<\/li>\n<\/ul>\n<p>Lorsque vous pr\u00e9visualisez votre application dans le navigateur, vous devriez voir un r\u00e9sultat similaire \u00e0 celui ci-dessous.<\/p>\n<figure style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-blog-post.jpg\" alt=\"Exemple de composant sur une page web\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Exemple de composant sur une page web<\/figcaption><\/figure>\n<h2>D\u00e9ployer votre projet Laravel Tailwind sur Kinsta<\/h2>\n<p>Avant de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">d\u00e9ployer et d&rsquo;h\u00e9berger votre application Laravel<\/a> avec Kinsta, apportez quelques modifications suppl\u00e9mentaires pour vous assurer qu&rsquo;elle fonctionne correctement lorsqu&rsquo;elle est h\u00e9berg\u00e9e.<\/p>\n<ol start=\"1\">\n<li>Ouvrez <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. Changez la valeur de <code>protected $proxies<\/code> pour permettre \u00e0 votre application Laravel de faire confiance \u00e0 tous les proxys :<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Cr\u00e9ez un nouveau fichier <strong>.htaccess<\/strong> dans le r\u00e9pertoire racine de votre projet et collez le code suivant :<\/li>\n<\/ol>\n<pre><code class=\"language-apacheconf\">&lt;IfModule mod_rewrite.c&gt;\n  RewriteEngine On\n  RewriteRule ^(.*)$ public\/$1 [L]\n&lt;\/IfModule&gt;<\/code><\/pre>\n<ol start=\"3\">\n<li>Cr\u00e9ez un nouveau d\u00e9p\u00f4t Git et transf\u00e9rez-y votre code (Kinsta prend en charge le transfert depuis GitHub, GitLab et Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Connectez-vous \u00e0 votre compte Kinsta ou cr\u00e9ez-en un nouveau. Une fois sur votre <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">tableau de bord MyKinsta<\/a>, cliquez sur le bouton <strong>Ajouter un service<\/strong>, puis s\u00e9lectionnez <strong>Application<\/strong>, comme dans la capture d&rsquo;\u00e9cran ci-dessous.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-mykinsta-create-app.png\" alt=\"Ajouter une application sur MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">Ajouter une application sur MyKinsta<\/figcaption><\/figure>\n<p>MyKinsta vous invite \u00e0 connecter votre compte Git. Compl\u00e9tez l&rsquo;autorisation comme demand\u00e9, puis s\u00e9lectionnez le projet que vous avez pr\u00e9c\u00e9demment pouss\u00e9 dans votre d\u00e9p\u00f4t et la branche que vous voulez utiliser.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-app-details-mykinsta.jpg\" alt=\"Configurer les d\u00e9tails d'une nouvelle application sur Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Configurer les d\u00e9tails d&rsquo;une nouvelle application sur Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>Ajoutez votre Laravel <code>APP_KEY<\/code> dans la section <strong>Variables d&rsquo;environnement<\/strong>. La cl\u00e9 se trouve dans le fichier <strong>.env<\/strong> de votre r\u00e9pertoire de projet local.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-env-variables-mykinsta.png\" alt=\"Configurer les variables d'environnement de l'application sur Kinsta\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Configurer les variables d&rsquo;environnement de l&rsquo;application sur Kinsta<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Cliquez sur <strong>Continuer<\/strong> et s\u00e9lectionnez l&rsquo;environnement de construction en fonction de vos pr\u00e9f\u00e9rences.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Laissez la commande de d\u00e9marrage dans la section <strong>Ressources<\/strong> vide pour l&rsquo;instant, puis cliquez sur <strong>Continuer<\/strong> pour poursuivre.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Enfin, compl\u00e9tez les informations de paiement. Le d\u00e9ploiement commence imm\u00e9diatement.<\/li>\n<\/ol>\n<p>Vous avez besoin de deux build packs pour faire fonctionner votre application correctement : PHP pour ex\u00e9cuter les commandes <code>php<\/code>, et Node.js, pour ex\u00e9cuter les commandes <code>npm<\/code>. Pour cela, proc\u00e9dez comme suit<\/p>\n<ol start=\"9\">\n<li>Acc\u00e9dez \u00e0 votre application et, dans la navigation de gauche, cliquez sur <strong>Param\u00e8tres<\/strong>.<\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Cliquez sur <strong>Ajout de buildpack<\/strong> et ajoutez les build packs pour Node.js et PHP. Cependant, assurez-vous que le build pack PHP est <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">ajout\u00e9 en dernier<\/a> dans la s\u00e9quence, car il s&rsquo;agit d&rsquo;une application bas\u00e9e sur PHP.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Cliquez sur le bouton <strong>D\u00e9ployer maintenant<\/strong> qui apparait apr\u00e8s avoir ajout\u00e9 les nouveaux build packs, comme illustr\u00e9 dans l&rsquo;image ci-dessous.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-buildpacks-node-php.jpg\" alt=\"D\u00e9ployer l'application apr\u00e8s avoir ajout\u00e9 un build pack sur Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">D\u00e9ployer l&rsquo;application apr\u00e8s avoir ajout\u00e9 un build pack sur Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Enfin, allez dans l&rsquo;onglet <strong>Processus<\/strong> de votre application, modifiez le processus Web par d\u00e9faut et remplacez sa <strong>commande Start<\/strong> par ce qui suit :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run build && heroku-php-apache2<\/code><\/pre>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-webprocess-details.jpg\" alt=\"Mise \u00e0 jour de la commande de d\u00e9marrage du processus sur Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Mise \u00e0 jour de la commande de d\u00e9marrage du processus sur Kinsta<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir mis \u00e0 jour la commande de d\u00e9marrage, votre application sera automatiquement red\u00e9ploy\u00e9e avec la nouvelle commande. Une fois le d\u00e9ploiement r\u00e9ussi, vous pouvez visiter le domaine pour voir le magnifique composant de carte que vous avez cr\u00e9\u00e9 et commencer \u00e0 tester et \u00e0 d\u00e9velopper votre application.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Tailwind vous aide \u00e0 faire passer votre projet Laravel du stade de simple base \u00e0 celui de projet parfaitement \u00e9poustouflant. Il est facile \u00e0 utiliser et vous \u00e9vite de taper d&rsquo;\u00e9normes piles de code juste pour obtenir l&rsquo;apparence que vous souhaitez.<\/p>\n<p>Maintenant que vous connaissez les bases, explorez les capacit\u00e9s de <a href=\"https:\/\/kinsta.com\/fr\/blog\/tailwind-css\/\">Tailwind<\/a> pour am\u00e9liorer l&rsquo;apparence de votre application avec des polices fantaisistes et des effets enchanteurs. Ensuite, <a href=\"https:\/\/my.kinsta.com\/login?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9ployez-la \u00e0 l&rsquo;aide de MyKinsta<\/a> pour permettre au monde entier d&rsquo;appr\u00e9cier votre application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chaque site web Laravel a besoin d&rsquo;un peu de style, et Tailwind CSS est le moyen le plus simple de donner du style \u00e0 votre site. &#8230;<\/p>\n","protected":false},"author":290,"featured_media":71749,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[986],"class_list":["post-71748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-laravel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel<\/title>\n<meta name=\"description\" content=\"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l&#039;aide de MyKinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel\" \/>\n<meta property=\"og:description\" content=\"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l&#039;aide de MyKinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:27:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-03T03:00:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l&#039;aide de MyKinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel\",\"datePublished\":\"2023-08-07T16:27:14+00:00\",\"dateModified\":\"2023-11-03T03:00:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\"},\"wordCount\":1398,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\",\"name\":\"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:27:14+00:00\",\"dateModified\":\"2023-11-03T03:00:18+00:00\",\"description\":\"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l'aide de MyKinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel","description":"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l'aide de MyKinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel","og_description":"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l'aide de MyKinsta.","og_url":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-08-07T16:27:14+00:00","article_modified_time":"2023-11-03T03:00:18+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l'aide de MyKinsta.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Marcia Ramos","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel","datePublished":"2023-08-07T16:27:14+00:00","dateModified":"2023-11-03T03:00:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/"},"wordCount":1398,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/","url":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/","name":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:27:14+00:00","dateModified":"2023-11-03T03:00:18+00:00","description":"Cet article pratique explore comment utiliser Tailwind CSS pour pimenter votre projet Laravel, puis le d\u00e9ployer \u00e0 l'aide de MyKinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/laravel-tailwind-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/fr\/sujets\/laravel\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er de belles pages en utilisant Tailwind CSS et Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=71748"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71748\/revisions"}],"predecessor-version":[{"id":71782,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71748\/revisions\/71782"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71748\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/71749"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=71748"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=71748"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=71748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}