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 für die Gestaltung deiner HTML-Elemente. Anstatt endlosen CSS-Code zu schreiben, kannst du schnell individuelle Webseiten erstellen und deine Stylesheets einfach pflegen und skalieren.

Tailwind ist zusammen mit Alpine.js und Livewire Teil des TALL-Stacks. Die Laravel-Community hat diese Full-Stack-Entwicklungslösung erstellt, um Entwicklern aller Erfahrungsstufen zu helfen, schnell Prototypen von Webanwendungen zu erstellen. Diese Lösungen sind auch ohne tiefgreifende Kenntnisse von Front-End- oder Back-End-Technologien einfach zu bedienen.

In diesem praktischen Artikel erfährst du, wie du mit Tailwind CSS dein Laravel-Projekt aufpeppst und es dann mit MyKinsta bereitstellst.

Verbessere dein Laravel-Projekt mit Tailwind

Um loszulegen, erstelle eine einfache Laravel-Seite und verwende dann Tailwind CSS, um sie mit minimalem Aufwand zu gestalten.

Voraussetzungen

Um dem Tutorial folgen zu können, ist Folgendes vorausgesetzt:

Um das fertige Projekt zu sehen, schau dir den kompletten Projektcode an.

Laravel-Projekt und Tailwind einrichten

So erstellst du ein neues Laravel-Projekt mit Composer:

  1. Öffne im Terminal das Verzeichnis, in dem das Projekt gespeichert werden soll, und führe es aus:
composer create-project laravel/laravel my-project
  1. Gehe in das Verzeichnis my-project, um die benötigten Pakete zu installieren:
cd my-project
  1. Installiere die Pakete, um mit Tailwind zu arbeiten:
npm install -D tailwindcss postcss autoprefixer
  1. Führe den folgenden Befehl aus, um die Konfigurationsdateien von Tailwind einzurichten:
npx tailwindcss init -p

Diese Aktion legt zwei Dateien im Stammverzeichnis deines Projekts ab: tailwind.config.js und postcss.config.js.

Konfiguriere die Pfade für deine Vorlagen

  1. Als Nächstes konfigurierst du deine Vorlagenpfade in der Datei tailwind.config.js. Laravel sucht standardmäßig nach CSS-Dateien im öffentlichen Verzeichnis. Der Template-Pfad teilt Laravel mit, wo die CSS-Dateien der Anwendung zu finden sind.
  1. Ersetze den Code in der Datei tailwind.config.js durch den folgenden:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Füge die Tailwind-CSS-Direktiven zum CSS des Projekts hinzu

  1. Um die Tailwind-CSS-Direktiven hinzuzufügen, gehst du in den Ordner resources/css und öffnest die Datei app.css.
  1. Füge dann den folgenden Code hinzu:
@tailwind base;
@tailwind components;
@tailwind utilities;

Erstelle die Anwendung

Bevor du deine Anwendung lokal ausführst:

  1. Starte den Vite-Entwicklungsserver:
npm run dev

Dieser Befehl bündelt deine statische Asset-Datei, einschließlich Tailwind CSS, und startet den lokalen Vite-Server.

  1. Verwende Artisan, um deine Laravel-Anwendung auszuführen:
php artisan serve

Deine Anwendung sollte jetzt unter http://127.0.0.1:8000/ laufen. Sie zeigt die Standardausgabe einer neu erstellten Laravel-Anwendung an.

Wenn du die Routedatei resources/views/welcome.blade.php öffnest, kannst du sehen, dass sie bereits Tailwind-Dienstleistungsklassen verwendet.

Wie man eine einfache Tailwind-Komponente erstellt

Um besser zu verstehen, wie Tailwind funktioniert:

  1. Öffne ressourcen/ansichten/welcome.blade.php.
  1. Lösche den Code aus der Willkommensansicht der Anwendung.
  1. Ersetze ihn durch den folgenden Code, der eine schöne Kartenkomponente darstellt:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

Der obige Code verwendet Vite, um die app.css-Datei über @vite('resources/css/app.css') zu importieren. Außerdem importiert er Tailwind. Er erstellt eine grundlegende Auszeichnungskomponente, um eine Blogkarte mit diesen Tailwind-CSS-Hilfsklassen zu gestalten:

  • max-w-sm – Setzt die maximale Breite des Containers auf die Größe des Haltepunkts sm (small).
  • m-24 – Fügt einen Rand von 24 Einheiten (96px oder 6rem) an allen Seiten des Containers hinzu.
  • rounded – Fügt einen border-radius hinzu, damit die Ecken des Containers abgerundet werden.
  • overflow-hidden – Blendet alle Inhalte aus, die den Container überfüllen.
  • shadow-lg – Fügt dem Container einen Schatteneffekt hinzu.
  • w-full – Setzt die Bildbreite auf 100% des Containers.
  • px-6 py-4 – Fügt ein Padding von 6 Einheiten (24px oder 1,5rem) auf der x-Achse und 4 Einheiten (16px oder 1rem) auf der y-Achse hinzu.
  • font-bold – Setzt die Schriftstärke des Textes auf fett.
  • text-xl – Setzt die Schriftgröße des Textes auf extragroß.
  • mb-2 – Fügt dem Element einen unteren Rand von 2 Einheiten (0,5rem oder 8px) hinzu.
  • text-gray-600 – Setzt die Textfarbe auf dunkelgrau.
  • text-base – Setzt die Schriftgröße des Textes auf den Standardwert.

Wenn du dir deine Anwendung im Browser ansiehst, solltest du eine ähnliche Ausgabe wie die folgende sehen.

Beispielkomponente auf einer Webseite
Beispielkomponente auf einer Webseite

Dein Laravel-Tailwind-Projekt auf Kinsta bereitstellen

Bevor du deine Laravel-Anwendung bei Kinsta bereitstellst und hostest, solltest du noch ein paar Änderungen vornehmen, um sicherzustellen, dass sie beim Hosten richtig funktioniert.

  1. Öffne app/Http/Middleware/TrustProxies.php. Ändere den Wert von protected $proxies, damit deine Laravel-Anwendung allen Proxys vertrauen kann:
protected $proxies = '*';
  1. Erstelle eine neue .htaccess-Datei im Hauptverzeichnis deines Projekts und füge den folgenden Code ein:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Erstelle ein neues Git-Repository und pushe deinen Code dorthin (Kinsta unterstützt das Pushing von GitHub, GitLab und Bitbucket).
  1. Melde dich bei deinem Kinsta-Konto an oder erstelle ein neues. In deinem MyKinsta-Dashboard klickst du auf die Schaltfläche Dienst hinzufügen und wählst dann Anwendung aus, wie im Screenshot unten.
Hinzufügen einer Anwendung auf MyKinsta
Hinzufügen einer Anwendung auf MyKinsta

MyKinsta fordert dich auf, dein Git-Konto zu verknüpfen. Vervollständige die Autorisierung wie gefordert und wähle dann das Projekt, das du zuvor in dein Repository gepusht hast, sowie den Zweig, den du verwenden möchtest.

Konfigurieren neuer Anwendungsdetails auf Kinsta
Konfigurieren neuer Anwendungsdetails auf Kinsta
  1. Füge deinen Laravel APP_KEY im Abschnitt Umgebungsvariablen hinzu. Der Schlüssel befindet sich in der .env-Datei deines lokalen Projektverzeichnisses.
Umgebungsvariablen für die Anwendung auf Kinsta konfigurieren
Umgebungsvariablen für die Anwendung auf Kinsta konfigurieren
  1. Klicke auf Weiter und wähle die Build-Umgebung nach deinen Wünschen aus.
  1. Lass den Startbefehl im Abschnitt Ressourcen vorerst leer und klicke dann auf Weiter, um fortzufahren.
  1. Zum Schluss gibst du die Zahlungsinformationen ein. Die Bereitstellung beginnt sofort.

Du brauchst zwei Build Packs, damit deine Anwendung richtig läuft: PHP, um php Befehle auszuführen, und Node.js, um npm Befehle auszuführen. Um dies zu tun:

  1. Gehe zu deiner Anwendung und klicke in der linken Navigation auf Einstellungen.
  1. Klicke auf Buildpack hinzufügen und füge die Buildpacks für Node.js und PHP hinzu. Achte jedoch darauf, dass das PHP-Buildpack als letztes hinzugefügt wird, da es sich um eine PHP-basierte Anwendung handelt.
  1. Klicke auf die Schaltfläche Jetzt bereitstellen, die nach dem Hinzufügen der neuen Buildpacks erscheint, wie in der Abbildung unten dargestellt.
Bereitstellung der Anwendung nach dem Hinzufügen des Build Packs auf Kinsta
Bereitstellung der Anwendung nach dem Hinzufügen des Build Packs auf Kinsta
  1. Zum Schluss gehst du auf die Registerkarte Prozesse deiner Anwendung, bearbeitest den Standard-Webprozess und ersetzst den Startbefehl durch den folgenden:
npm run build && heroku-php-apache2
Aktualisieren des Prozess-Startbefehls auf Kinsta
Aktualisieren des Prozess-Startbefehls auf Kinsta

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öne Kartenkomponente zu sehen, die du erstellt hast, und mit dem Testen und Entwickeln deiner Anwendung beginnen.

Zusammenfassung

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ünschte Aussehen zu erhalten.

Jetzt, wo du die Grundlagen kennst, kannst du die Möglichkeiten von Tailwind erkunden, um das Aussehen deiner Anwendung mit ausgefallenen Schriftarten und bezaubernden Effekten zu verbessern. Veröffentliche sie dann mit MyKinsta, damit auch die Welt Freude an deiner Anwendung hat.

Marcia Ramos Kinsta

Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.