{"id":64696,"date":"2023-08-07T17:28:05","date_gmt":"2023-08-07T16:28:05","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=64696&#038;preview=true&#038;preview_id=64696"},"modified":"2023-08-15T12:10:23","modified_gmt":"2023-08-15T11:10:23","slug":"laravel-tailwind","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/","title":{"rendered":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt"},"content":{"rendered":"<p>Jede Laravel-Website kann etwas Stil gebrauchen, und <a href=\"https:\/\/kinsta.com\/de\/blog\/tailwind-css\/\">Tailwind CSS ist der einfachste Weg, um deiner Website ein gewisses Flair zu verleihen<\/a>. Dieses CSS-Framework bietet vordefinierte Klassen f\u00fcr die Gestaltung deiner HTML-Elemente. Anstatt endlosen CSS-Code zu schreiben, kannst du schnell individuelle Webseiten erstellen und deine Stylesheets einfach pflegen und skalieren.<\/p>\n<p>Tailwind ist zusammen mit Alpine.js und Livewire Teil des <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">TALL-Stacks<\/a>. Die Laravel-Community hat diese Full-Stack-Entwicklungsl\u00f6sung erstellt, um Entwicklern aller Erfahrungsstufen zu helfen, schnell Prototypen von Webanwendungen zu erstellen. Diese L\u00f6sungen sind auch ohne tiefgreifende Kenntnisse von Front-End- oder Back-End-Technologien einfach zu bedienen.<\/p>\n<p>In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt aufpeppst und es dann mit MyKinsta bereitstellst.<\/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>Verbessere dein Laravel-Projekt mit Tailwind<\/h2>\n<p>Um loszulegen, erstelle eine einfache Laravel-Seite und verwende dann Tailwind CSS, um sie mit minimalem Aufwand zu gestalten.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Um dem Tutorial folgen zu k\u00f6nnen, ist Folgendes vorausgesetzt:<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> und <a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> sind installiert.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> und npm sind installiert.<\/li>\n<li>Ein bestehendes <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>-Konto f\u00fcr die Bereitstellung. Wenn du noch kein Konto hast, melde <a href=\"https:\/\/kinsta.com\/de\/anmelden\/?product_type=app-db\">dich f\u00fcr eine kostenlose Testversion an<\/a>.<\/li>\n<\/ul>\n<p>Um das fertige Projekt zu sehen, schau dir den <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">kompletten Projektcode<\/a> an.<\/p>\n<h2>Laravel-Projekt und Tailwind einrichten<\/h2>\n<p>So erstellst du ein neues Laravel-Projekt mit Composer:<\/p>\n<ol start=\"1\">\n<li>\u00d6ffne im Terminal das Verzeichnis, in dem das Projekt gespeichert werden soll, und f\u00fchre es aus:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>Gehe in das Verzeichnis <strong>my-project<\/strong>, um die ben\u00f6tigten Pakete zu installieren:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Installiere die Pakete, um mit Tailwind zu arbeiten:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>F\u00fchre den folgenden Befehl aus, um die Konfigurationsdateien von Tailwind einzurichten:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Diese Aktion legt zwei Dateien im Stammverzeichnis deines Projekts ab: <strong>tailwind.config.js<\/strong> und <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Konfiguriere die Pfade f\u00fcr deine Vorlagen<\/h2>\n<ol start=\"1\">\n<li>Als N\u00e4chstes konfigurierst du deine Vorlagenpfade in der Datei <strong>tailwind.config.js<\/strong>. Laravel sucht standardm\u00e4\u00dfig nach CSS-Dateien im \u00f6ffentlichen Verzeichnis. Der Template-Pfad teilt Laravel mit, wo die CSS-Dateien der Anwendung zu finden sind.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Ersetze den Code in der Datei <strong>tailwind.config.js<\/strong> durch den folgenden:<\/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>F\u00fcge die Tailwind-CSS-Direktiven zum CSS des Projekts hinzu<\/h2>\n<ol start=\"1\">\n<li>Um die Tailwind-CSS-Direktiven hinzuzuf\u00fcgen, gehst du in den Ordner <strong>resources\/css<\/strong> und \u00f6ffnest die Datei <strong>app.css<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>F\u00fcge dann den folgenden Code hinzu:<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>Erstelle die Anwendung<\/h2>\n<p>Bevor du deine Anwendung lokal ausf\u00fchrst:<\/p>\n<ol start=\"1\">\n<li>Starte den Vite-Entwicklungsserver:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Dieser Befehl b\u00fcndelt deine statische Asset-Datei, einschlie\u00dflich Tailwind CSS, und startet den lokalen Vite-Server.<\/p>\n<ol start=\"2\">\n<li>Verwende Artisan, um deine Laravel-Anwendung auszuf\u00fchren:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Deine Anwendung sollte jetzt unter <code>http:\/\/127.0.0.1:8000\/<\/code> laufen. Sie zeigt die Standardausgabe einer neu erstellten Laravel-Anwendung an.<\/p>\n<p>Wenn du die Routedatei <strong>resources\/views\/welcome.blade.php<\/strong> \u00f6ffnest, kannst du sehen, dass sie bereits Tailwind-Dienstleistungsklassen verwendet.<\/p>\n<h2>Wie man eine einfache Tailwind-Komponente erstellt<\/h2>\n<p>Um besser zu verstehen, wie Tailwind funktioniert:<\/p>\n<ol start=\"1\">\n<li>\u00d6ffne <strong>ressourcen\/ansichten\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>L\u00f6sche den Code aus der Willkommensansicht der Anwendung.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Ersetze ihn durch den folgenden Code, der eine sch\u00f6ne Kartenkomponente darstellt:<\/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>Der obige Code verwendet Vite, um die <strong>app.css<\/strong>-Datei \u00fcber <code>@vite('resources\/css\/app.css')<\/code> zu importieren. Au\u00dferdem importiert er Tailwind. Er erstellt eine grundlegende Auszeichnungskomponente, um eine Blogkarte mit diesen Tailwind-CSS-Hilfsklassen zu gestalten:<\/p>\n<ul>\n<li><code>max-w-sm<\/code> &#8211; Setzt die maximale Breite des Containers auf die Gr\u00f6\u00dfe des Haltepunkts sm (small).<\/li>\n<li><code>m-24<\/code> &#8211; F\u00fcgt einen Rand von 24 Einheiten (96px oder 6rem) an allen Seiten des Containers hinzu.<\/li>\n<li><code>rounded<\/code> &#8211; F\u00fcgt einen border-radius hinzu, damit die Ecken des Containers abgerundet werden.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Blendet alle Inhalte aus, die den Container \u00fcberf\u00fcllen.<\/li>\n<li><code>shadow-lg<\/code> &#8211; F\u00fcgt dem Container einen Schatteneffekt hinzu.<\/li>\n<li><code>w-full<\/code> &#8211; Setzt die Bildbreite auf 100% des Containers.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; F\u00fcgt ein Padding von 6 Einheiten (24px oder 1,5rem) auf der x-Achse und 4 Einheiten (16px oder 1rem) auf der y-Achse hinzu.<\/li>\n<li><code>font-bold<\/code> &#8211; Setzt die Schriftst\u00e4rke des Textes auf fett.<\/li>\n<li><code>text-xl<\/code> &#8211; Setzt die Schriftgr\u00f6\u00dfe des Textes auf extragro\u00df.<\/li>\n<li><code>mb-2<\/code> &#8211; F\u00fcgt dem Element einen unteren Rand von 2 Einheiten (0,5rem oder 8px) hinzu.<\/li>\n<li><code>text-gray-600<\/code> &#8211; Setzt die Textfarbe auf dunkelgrau.<\/li>\n<li><code>text-base<\/code> &#8211; Setzt die Schriftgr\u00f6\u00dfe des Textes auf den Standardwert.<\/li>\n<\/ul>\n<p>Wenn du dir deine Anwendung im Browser ansiehst, solltest du eine \u00e4hnliche Ausgabe wie die folgende sehen.<\/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=\"Beispielkomponente auf einer Webseite\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Beispielkomponente auf einer Webseite<\/figcaption><\/figure>\n<h2>Dein Laravel-Tailwind-Projekt auf Kinsta bereitstellen<\/h2>\n<p>Bevor du <a href=\"https:\/\/sevalla.com\/application-hosting\/\">deine Laravel-Anwendung<\/a> bei Kinsta bereitstellst und hostest, solltest du noch ein paar \u00c4nderungen vornehmen, um sicherzustellen, dass sie beim Hosten richtig funktioniert.<\/p>\n<ol start=\"1\">\n<li>\u00d6ffne <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. \u00c4ndere den Wert von <code>protected $proxies<\/code>, damit deine Laravel-Anwendung allen Proxys vertrauen kann:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Erstelle eine neue <strong>.htaccess<\/strong>-Datei im Hauptverzeichnis deines Projekts und f\u00fcge den folgenden Code ein:<\/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>Erstelle ein neues Git-Repository und pushe deinen Code dorthin (Kinsta unterst\u00fctzt das Pushing von GitHub, GitLab und Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Melde dich bei deinem Kinsta-Konto an oder erstelle ein neues. In deinem <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> klickst du auf die Schaltfl\u00e4che <strong>Dienst hinzuf\u00fcgen<\/strong> und w\u00e4hlst dann <strong>Anwendung<\/strong> aus, wie im Screenshot unten.<\/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=\"Hinzuf\u00fcgen einer Anwendung auf MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen einer Anwendung auf MyKinsta<\/figcaption><\/figure>\n<p>MyKinsta fordert dich auf, dein Git-Konto zu verkn\u00fcpfen. Vervollst\u00e4ndige die Autorisierung wie gefordert und w\u00e4hle dann das Projekt, das du zuvor in dein Repository gepusht hast, sowie den Zweig, den du verwenden m\u00f6chtest.<\/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=\"Konfigurieren neuer Anwendungsdetails auf Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Konfigurieren neuer Anwendungsdetails auf Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>F\u00fcge deinen Laravel <code>APP_KEY<\/code> im Abschnitt <strong>Umgebungsvariablen<\/strong> hinzu. Der Schl\u00fcssel befindet sich in der <strong>.env<\/strong>-Datei deines lokalen Projektverzeichnisses.<\/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=\"Umgebungsvariablen f\u00fcr die Anwendung auf Kinsta konfigurieren\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Umgebungsvariablen f\u00fcr die Anwendung auf Kinsta konfigurieren<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Klicke auf <strong>Weiter<\/strong> und w\u00e4hle die Build-Umgebung nach deinen W\u00fcnschen aus.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Lass den Startbefehl im Abschnitt <strong>Ressourcen<\/strong> vorerst leer und klicke dann auf <strong>Weiter<\/strong>, um fortzufahren.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Zum Schluss gibst du die Zahlungsinformationen ein. Die Bereitstellung beginnt sofort.<\/li>\n<\/ol>\n<p>Du brauchst zwei Build Packs, damit deine Anwendung richtig l\u00e4uft: PHP, um <code>php<\/code> Befehle auszuf\u00fchren, und Node.js, um <code>npm<\/code> Befehle auszuf\u00fchren. Um dies zu tun:<\/p>\n<ol start=\"9\">\n<li>Gehe zu deiner Anwendung und klicke in der linken Navigation auf <strong>Einstellungen<\/strong>.<\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Klicke auf <strong>Buildpack hinzuf\u00fcgen<\/strong> und f\u00fcge die Buildpacks f\u00fcr Node.js und PHP hinzu. Achte jedoch darauf, dass das PHP-Buildpack als <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">letztes hinzugef\u00fcgt<\/a> wird, da es sich um eine PHP-basierte Anwendung handelt.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Klicke auf die Schaltfl\u00e4che <strong>Jetzt bereitstellen<\/strong>, die nach dem Hinzuf\u00fcgen der neuen Buildpacks erscheint, wie in der Abbildung unten dargestellt.<\/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=\"Bereitstellung der Anwendung nach dem Hinzuf\u00fcgen des Build Packs auf Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">Bereitstellung der Anwendung nach dem Hinzuf\u00fcgen des Build Packs auf Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Zum Schluss gehst du auf die Registerkarte <strong>Prozesse<\/strong> deiner Anwendung, bearbeitest den Standard-Webprozess und ersetzst den <strong>Startbefehl<\/strong> durch den folgenden:<\/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=\"Aktualisieren des Prozess-Startbefehls auf Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Aktualisieren des Prozess-Startbefehls auf Kinsta<\/figcaption><\/figure>\n<p>Nachdem du den Startbefehl aktualisiert hast, wird deine App automatisch mit dem neuen Befehl bereitgestellt. Sobald der Einsatz erfolgreich war, kannst du die Domain besuchen, um die sch\u00f6ne Kartenkomponente zu sehen, die du erstellt hast, und mit dem Testen und Entwickeln deiner Anwendung beginnen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Tailwind hilft dir dabei, dein Laravel-Projekt von einer einfachen Anwendung zu einem atemberaubenden Projekt zu machen. Es ist einfach zu bedienen und erspart es dir, riesige Mengen an Code zu tippen, nur um das gew\u00fcnschte Aussehen zu erhalten.<\/p>\n<p>Jetzt, wo du die Grundlagen kennst, kannst du die M\u00f6glichkeiten <a href=\"https:\/\/kinsta.com\/de\/blog\/tailwind-css\/\">von Tailwind<\/a> erkunden, um das Aussehen deiner Anwendung mit ausgefallenen Schriftarten und bezaubernden Effekten zu verbessern. <a href=\"https:\/\/my.kinsta.com\/login?lang=de\">Ver\u00f6ffentliche sie dann mit MyKinsta<\/a>, damit auch die Welt Freude an deiner Anwendung hat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jede Laravel-Website kann etwas Stil gebrauchen, und Tailwind CSS ist der einfachste Weg, um deiner Website ein gewisses Flair zu verleihen. Dieses CSS-Framework bietet vordefinierte Klassen &#8230;<\/p>\n","protected":false},"author":290,"featured_media":64697,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[958],"class_list":["post-64696","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>Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt<\/title>\n<meta name=\"description\" content=\"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.\" \/>\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\/de\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt\" \/>\n<meta property=\"og:description\" content=\"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:28:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T11:10:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt\",\"datePublished\":\"2023-08-07T16:28:05+00:00\",\"dateModified\":\"2023-08-15T11:10:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\"},\"wordCount\":1196,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\",\"name\":\"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:28:05+00:00\",\"dateModified\":\"2023-08-15T11:10:23+00:00\",\"description\":\"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt","description":"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.","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\/de\/blog\/laravel-tailwind\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt","og_description":"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.","og_url":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-08-07T16:28:05+00:00","article_modified_time":"2023-08-15T11:10:23+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Marcia Ramos","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt","datePublished":"2023-08-07T16:28:05+00:00","dateModified":"2023-08-15T11:10:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/"},"wordCount":1196,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/","url":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/","name":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:28:05+00:00","dateModified":"2023-08-15T11:10:23+00:00","description":"In diesem praktischen Artikel erf\u00e4hrst du, wie du mit Tailwind CSS dein Laravel-Projekt versch\u00f6nern kannst und es dann mit MyKinsta bereitstellst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/de\/thema\/laravel\/"},{"@type":"ListItem","position":3,"name":"Wie man mit Tailwind CSS und Laravel sch\u00f6ne Seiten erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=64696"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64696\/revisions"}],"predecessor-version":[{"id":64857,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64696\/revisions\/64857"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64696\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/64697"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=64696"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=64696"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=64696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}