{"id":54774,"date":"2023-08-07T18:30:04","date_gmt":"2023-08-07T16:30:04","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=54774&#038;preview=true&#038;preview_id=54774"},"modified":"2023-08-14T12:51:39","modified_gmt":"2023-08-14T10:51:39","slug":"laravel-tailwind","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/","title":{"rendered":"Zo maak je prachtige pagina&#8217;s met Tailwind CSS en Laravel"},"content":{"rendered":"<p>Elke Laravel website kan wel wat stijl gebruiken, en <a href=\"https:\/\/kinqsta.com\/blog\/tailwind-css\/\">Tailwind CSS is de eenvoudigste manier om je site wat flair<\/a> te geven. Dit utility-first CSS framework biedt voorgedefinieerde classes om je HTML elementen te stylen. In plaats van eindeloos CSS code te schrijven, kun je dus snel custom webpagina&#8217;s bouwen en daarna gemakkelijk je stylesheets onderhouden en opschalen.<\/p>\n<p>Tailwind maakt deel uit van de <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">TALL stack<\/a>, samen met Alpine.js en Livewire. De Laravel gemeenschap heeft deze full-stack ontwikkeloplossing gebouwd om developers van alle niveaus te helpen snel prototypes van webapplicaties te maken. Deze oplossingen zijn eenvoudig te gebruiken zonder diepgaande kennis van front-end of back-end technologie\u00ebn.<\/p>\n<p>Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel project op te leuken en het vervolgens kunt deployen met 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>Je Laravel project verbeteren met Tailwind<\/h2>\n<p>Om te beginnen maak je een basic Laravel pagina en gebruik je Tailwind CSS om deze met minimale inspanning te stylen.<\/p>\n<h3>Vereisten<\/h3>\n<p>Om deze tutorial te kunnen volgen, heb je nodig:<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> en <a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> ge\u00efnstalleerd.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> en npm ge\u00efnstalleerd.<\/li>\n<li><a href=\"https:\/\/my.kinqsta.com\/?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta account<\/a> voor het deployen. Als je nog geen account hebt, <a href=\"https:\/\/kinqsta.com\/nl\/registreren\/?product_type=app-db\">meld je dan aan voor een gratis trial<\/a>.<\/li>\n<\/ul>\n<p>Bekijk de <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">volledige projectcode<\/a> om het uiteindelijke project te zien.<\/p>\n<h2>Laravel project en Tailwind instellen<\/h2>\n<p>Maak een nieuw Laravel project met Composer:<\/p>\n<ol start=\"1\">\n<li>Open de terminal naar de map waar je het project wilt hebben en voer het uit:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>Ga naar de map <strong>my-project<\/strong> om de vereiste pakketten te installeren:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Installeer de pakketten om met Tailwind te werken:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>Voer het volgende commando uit om de configuratiebestanden van Tailwind in te stellen:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Deze actie plaatst twee bestanden in de root van je project: <strong>tailwind.config.js<\/strong> en <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Je templatepaden configureren<\/h2>\n<ol start=\"1\">\n<li>Configureer vervolgens je templatepadenin het <strong>tailwind.config.js<\/strong> bestand. Laravel zoekt standaard naar CSS-bestanden in de public directory. Het templatepad vertelt Laravel waar hij de CSS-bestanden van de applicatie kan vinden.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Vervang de code in het <strong>tailwind.config.js<\/strong> bestand door dit:<\/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>De Tailwind CSS richtlijnen toevoegen aan de CSS van het project<\/h2>\n<ol start=\"1\">\n<li>Om de richtlijnen voor Tailwind CSS toe te voegen, ga je naar de <strong>resources\/css<\/strong> map en open je het <strong>app.css<\/strong> bestand.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Voeg dan de volgende code toe:<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>De applicatie bouwen<\/h2>\n<p>Voordat je je app lokaal uitvoert:<\/p>\n<ol start=\"1\">\n<li>Start de Vite ontwikkelingsserver:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Dit commando bundelt je statische assets bestand, inclusief Tailwind CSS, en start de Vite lokale server.<\/p>\n<ol start=\"2\">\n<li>Gebruik Artisan om je Laravel app te draaien:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Je app zou nu moeten draaien op <code>http:\/\/127.0.0.1:8000\/<\/code>. Het toont de standaard uitvoer van een nieuw gemaakte Laravel applicatie.<\/p>\n<p>Bij het openen van het <strong>resources\/views\/welcome.blade.php<\/strong> route view bestand, kun je zien dat het al gebruik maakt van Tailwind utility classes.<\/p>\n<h2>Een simpel Tailwind component maken<\/h2>\n<p>Om beter te begrijpen hoe Tailwind werkt:<\/p>\n<ol start=\"1\">\n<li>Open <strong>resources\/views\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Verwijder de code uit de welkom preview van de applicatie.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Vervang deze door de onderstaande code, die een prachtig kaartcomponent rendert:<\/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>De bovenstaande code gebruikt Vite om het <strong>app.css<\/strong> bestand te importeren via <code>@vite('resources\/css\/app.css')<\/code>. Het importeert ook Tailwind. Het maakt een fundamenteel opmaakcomponent om een blogkaart na te maken met behulp van deze Tailwind CSS utility classes:<\/p>\n<ul>\n<li><code>max-w-sm<\/code> &#8211; Stelt de maximale breedte van de container in op de sm (kleine) breekpuntgrootte.<\/li>\n<li><code>m-24<\/code> &#8211; Voegt een marge van 24 eenheden (96px of 6rem) toe aan alle zijden van de container.<\/li>\n<li><code>rounded<\/code> &#8211; Voegt een border-radius toe om de hoeken van de container af te ronden.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Verbergt alle inhoud die de container overlapt.<\/li>\n<li><code>shadow-lg<\/code> &#8211; Voegt een schaduweffect toe aan de container.<\/li>\n<li><code>w-full<\/code> &#8211; Stelt de breedte van de afbeelding in op 100% van de container.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; Voegt opvulling toe van 6 eenheden (24px of 1,5rem) op de x-as en 4 eenheden (16px of 1rem) op de y-as.<\/li>\n<li><code>font-bold<\/code> &#8211; Stelt het font-gewicht van de tekst in op vet.<\/li>\n<li><code>text-xl<\/code> &#8211; Stelt de lettergrootte van de tekst in op extra groot.<\/li>\n<li><code>mb-2<\/code> &#8211; Voegt een ondermarge van 2 eenheden (0.5rem of 8px) toe aan het element.<\/li>\n<li><code>text-gray-600<\/code> &#8211; Stelt de tekstkleur in op donkergrijs.<\/li>\n<li><code>text-base<\/code> &#8211; Stelt de lettergrootte van de tekst in op de standaardwaarde.<\/li>\n<\/ul>\n<p>Als je een voorbeeld van je applicatie bekijkt in de browser, zou je een uitvoer moeten zien zoals hieronder.<\/p>\n<figure style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-blog-post.jpg\" alt=\"Component voorbeeld op een webpagina\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Component voorbeeld op een webpagina<\/figcaption><\/figure>\n<h2>Je Laravel Tailwind project deployen naar Kinsta<\/h2>\n<p>Voordat <a href=\"https:\/\/sevalla.com\/application-hosting\/\">je je Laravel applicatie uitrolt en host<\/a> met Kinsta, moet je nog een paar wijzigingen aanbrengen om ervoor te zorgen dat het goed werkt wanneer wij hem voor je hosten.<\/p>\n<ol start=\"1\">\n<li>Open <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. Verander de waarde van <code>protected $proxies<\/code> om je Laravel app alle proxies te laten vertrouwen:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Maak een nieuw <strong>.htaccess<\/strong> bestand in de hoofdmap van je project en plak de volgende code:<\/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>Maak een nieuwe Git repository en push je code ernaar (Kinsta ondersteunt pushen vanaf GitHub, GitLab en Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Log in op je Kinsta account of maak een nieuwe aan. Op je <a href=\"https:\/\/my.kinqsta.com\/?lang=nl\">MyKinsta Dashboard<\/a> klik je op de knop <strong>Dienst toevoegen<\/strong> en vervolgens op <strong>Applicatie<\/strong>, zoals in de schermafbeelding hieronder.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-mykinsta-create-app.png\" alt=\"Een applicatie toevoegen op MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">Een applicatie toevoegen op MyKinsta<\/figcaption><\/figure>\n<p>MyKinsta vraagt je om je Git account te koppelen. Vul de autorisatie in zoals gevraagd, selecteer dan het project dat je eerder naar je repository hebt gepushed en de branch die je wilt gebruiken.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-app-details-mykinsta.jpg\" alt=\"Nieuwe applicatiedetails configureren op Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Nieuwe applicatiedetails configureren op Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>Voeg je Laravel <code>APP_KEY<\/code> toe in het gedeelte <strong>Omgevingsvariabelen<\/strong>. De sleutel staat in het <strong>.env<\/strong> bestand van je lokale projectmap.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-env-variables-mykinsta.png\" alt=\"Applicatie omgevingsvariabelen configureren op Kinsta\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Applicatie omgevingsvariabelen configureren op Kinsta<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Klik op <strong>Doorgaan<\/strong> en selecteer de bouwomgeving volgens je voorkeuren.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Laat de startopdracht in het gedeelte <strong>Resources<\/strong> voorlopig leeg en klik op <strong>Doorgaan<\/strong> om verder te gaan.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Vul ten slotte de betalingsgegevens in. De implementatie start onmiddellijk.<\/li>\n<\/ol>\n<p>Je hebt twee build packs nodig om je applicatie goed te laten draaien: PHP om de commando&#8217;s <code>php<\/code> uit te voeren en Node.js, om de commando&#8217;s <code>npm<\/code> uit te voeren. Om dit te doen:<\/p>\n<ol start=\"9\">\n<li>Ga naar je applicatie en klik in de navigatie aan de linkerkant op <strong>Instellingen.<\/strong><\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Klik op <strong>Buildpack toevoegen<\/strong> en voeg de buildpacks voor Node.js en PHP toe. Zorg er echter voor dat het PHP buildpack <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">als laatste wordt toegevoegd<\/a>, omdat dit een op PHP gebaseerde applicatie is.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Klik op de knop <strong>Nu deployen <\/strong>die verschijnt na het toevoegen van de nieuwe buildpacks, zoals ge\u00efllustreerd in de afbeelding hieronder.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-buildpacks-node-php.jpg\" alt=\"App deployen na toevoegen build pack op Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">App deployen na toevoegen build pack op Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Ga ten slotte naar het tabblad <strong>Processen<\/strong> van je applicatie, bewerk het standaard Web proces en vervang de <strong>Start commando <\/strong>door het volgende:<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-webprocess-details.jpg\" alt=\"Het startcommando van het proces bijwerken op Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Het startcommando van het proces bijwerken op Kinsta<\/figcaption><\/figure>\n<p>Na het bijwerken van het startcommando wordt je app automatisch opnieuw uitgerold met het nieuwe commando. Zodra de deployment is geslaagd, kun je het domein bezoeken om de mooie kaartcomponent te zien die je hebt gemaakt en beginnen met het testen en ontwikkelen van je applicatie.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Tailwind helpt je om je Laravel project van eenvoudig tot perfect verbluffend te maken. Het is eenvoudig te gebruiken, waardoor je geen enorme stapels code hoeft te typen om het uiterlijk te krijgen dat je wilt.<\/p>\n<p>Nu je de basis kent, kun je de mogelijkheden <a href=\"https:\/\/kinqsta.com\/blog\/tailwind-css\/\">van Tailwind<\/a> verkennen om het uiterlijk van je applicatie te verbeteren met mooie lettertypen en betoverende effecten. <a href=\"https:\/\/my.kinqsta.com\/login?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">Deploy alles vervolgens met MyKinsta<\/a> om de wereld ook van jouw applicatie te laten genieten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elke Laravel website kan wel wat stijl gebruiken, en Tailwind CSS is de eenvoudigste manier om je site wat flair te geven. Dit utility-first CSS framework &#8230;<\/p>\n","protected":false},"author":290,"featured_media":54775,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[866],"class_list":["post-54774","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>Zo maak je prachtige pagina&#039;s met Tailwind CSS en Laravel<\/title>\n<meta name=\"description\" content=\"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met 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:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo maak je prachtige pagina&#039;s met Tailwind CSS en Laravel\" \/>\n<meta property=\"og:description\" content=\"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:30:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T10:51:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Zo maak je prachtige pagina&#8217;s met Tailwind CSS en Laravel\",\"datePublished\":\"2023-08-07T16:30:04+00:00\",\"dateModified\":\"2023-08-14T10:51:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\"},\"wordCount\":1242,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\",\"name\":\"Zo maak je prachtige pagina's met Tailwind CSS en Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:30:04+00:00\",\"dateModified\":\"2023-08-14T10:51:39+00:00\",\"description\":\"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinqsta.com\/nl\/onderwerpen\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo maak je prachtige pagina&#8217;s met Tailwind CSS en Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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:\/\/kinqsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/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:\/\/kinqsta.com\/nl\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo maak je prachtige pagina's met Tailwind CSS en Laravel","description":"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met 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:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo maak je prachtige pagina's met Tailwind CSS en Laravel","og_description":"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.","og_url":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-08-07T16:30:04+00:00","article_modified_time":"2023-08-14T10:51:39+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.","twitter_image":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Marcia Ramos","Geschatte leestijd":"8 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Zo maak je prachtige pagina&#8217;s met Tailwind CSS en Laravel","datePublished":"2023-08-07T16:30:04+00:00","dateModified":"2023-08-14T10:51:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/"},"wordCount":1242,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/","url":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/","name":"Zo maak je prachtige pagina's met Tailwind CSS en Laravel","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:30:04+00:00","dateModified":"2023-08-14T10:51:39+00:00","description":"Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel-project op te leuken en het vervolgens kunt deployen met MyKinsta.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#primaryimage","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/nl\/blog\/laravel-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinqsta.com\/nl\/onderwerpen\/laravel\/"},{"@type":"ListItem","position":3,"name":"Zo maak je prachtige pagina&#8217;s met Tailwind CSS en Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/nl\/#website","url":"https:\/\/kinqsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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:\/\/kinqsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/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:\/\/kinqsta.com\/nl\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/54774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/comments?post=54774"}],"version-history":[{"count":4,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/54774\/revisions"}],"predecessor-version":[{"id":54905,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/54774\/revisions\/54905"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/translations\/es"},{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54774\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media\/54775"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media?parent=54774"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/tags?post=54774"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/topic?post=54774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}