Das Duo Laravel Tailwind ist einer der schnellsten Wege, in einem Projekt eine Oberfläche zu bauen: Es verbindet Tailwind, ein Utility-First-CSS-Framework, mit Laravels Vite-basiertem Asset-Compiler, sodass du direkt in Blade gestalten kannst, statt zwischen einzelnen Stylesheets hin und her zu springen. In diesem Artikel führe ich dich Schritt für Schritt durch die Installation von Tailwind in einem sauberen Laravel-Projekt von Anfang bis Ende, durch den Einsatz von Utility-Klassen in Blade-Templates, das Aufräumen wiederkehrender Muster mit Blade-Komponenten und das Kleinhalten deines Produktions-Bundles.
Warum Tailwind und Laravel gut zusammenpassen
Laravel 11 und 12 nutzen Vite zum Kompilieren der Assets. Da Vite einen schnellen Dev-Server mit Hot Module Replacement mitbringt, aktualisiert sich der Browser fast augenblicklich, sobald du eine Klasse hinzufügst. Tailwind wiederum liefert kleine, zweckgebundene utility-Klassen statt fertiger Komponenten: Dinge wie flex, pt-4, text-center und bg-slate-900. Zusammen baust du Oberflächen, ohne dein HTML zu verlassen, ohne Namen zu erfinden und ohne ein riesiges Stylesheet aufzublähen. Und da Tailwind nur die tatsächlich verwendeten Klassen kompiliert, ist die finale CSS-Ausgabe in der Regel winzig.
Tailwind in einem Laravel-Projekt installieren
Wenn du mit einem frischen Laravel-Projekt startest, erstelle es zuerst und wechsle hinein. Installiere anschließend Tailwind und sein offizielles Vite-Plugin über npm. In modernen Tailwind-Versionen erfolgt die Einrichtung mit einem einzigen Vite-Plugin, ohne separate PostCSS-Konfiguration:
npm install tailwindcss @tailwindcss/viteÖffne danach vite.config.js und füge das Tailwind-Plugin neben dem Laravel-Plugin hinzu:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
});Um Tailwind in deine CSS-Einstiegsdatei einzubinden, öffne resources/css/app.css und füge eine einzige Import-Zeile hinzu. Modernes Tailwind verwendet einen schlichten Import statt des alten Trios @tailwind base; @tailwind components; @tailwind utilities;:
@import "tailwindcss";Lade schließlich die Assets im <head> deines Haupt-Blade-Layouts. Laravel stellt dafür die Direktive @vite bereit:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900">
@yield('content')
</body>
</html>Während der Entwicklung führst du npm run dev aus; das startet den Vite-Dev-Server und spiegelt Klassenänderungen sofort wider. Gleichzeitig startest du die Anwendung mit php artisan serve. Das war's — du bist bereit, Tailwind-Klassen in Blade zu verwenden.
Utility-Klassen in Blade-Templates
Die Idee von Tailwind ist, direkt im class-Attribut des Elements zu gestalten. Die folgende Karte definiert Abstände, Schatten, abgerundete Ecken und Farben ausschließlich mit Klassen:
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h2 class="text-lg font-semibold text-slate-900">Projekttitel</h2>
<p class="mt-2 text-sm text-slate-600">Eine kurze Beschreibung.</p>
<a href="#" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2
text-sm font-medium text-white hover:bg-indigo-700">Details</a>
</div>Präfixe wie hover:bg-indigo-700 bilden das Variant-System von Tailwind. Dieselbe Logik treibt responsives Design über Breakpoints an: Die Präfixe sm:, md: und lg: greifen ab dieser Bildschirmgröße und darüber. Beispielsweise ergibt grid grid-cols-1 md:grid-cols-3 auf kleinen Bildschirmen eine Spalte und auf mittleren und großen drei Spalten. Für den Dunkelmodus gibt es das Präfix dark:; dark:bg-slate-900 wird nur im dunklen Theme angewendet.
Blade-Direktiven mit Tailwind kombinieren
Tailwind ist nicht auf reines HTML beschränkt; es harmoniert hervorragend mit Blades Helfern für bedingte Klassen. Die Direktive @class ist ein sauberer Weg, Klassen anhand einer Bedingung hinzuzufügen:
<span @class([
'rounded px-2 py-1 text-xs font-medium',
'bg-green-100 text-green-800' => $aktiv,
'bg-slate-100 text-slate-500' => ! $aktiv,
])>
{{ $aktiv ? 'Aktiv' : 'Inaktiv' }}
</span>So verwaltest du Status-Badges, Hinweisboxen oder den Stil des aktiven Tabs an einer einzigen, gut lesbaren Stelle. Dieselben Utility-Klassen wiederholen sich auch in Schleifen mühelos: Ein Listenelement innerhalb von @foreach zu gestalten ist weit schneller, als anderswo separates CSS zu schreiben.
Wiederholung mit Blade-Komponenten vermeiden
Die häufigste Kritik am Utility-First-Ansatz ist, dieselbe lange Klassenkette überall zu wiederholen. In Laravel lautet die Antwort: Blade-Komponenten. Erstelle eine Button-Komponente:
php artisan make:component PrimaryButton --viewSchreibe in die erzeugte Datei resources/views/components/primary-button.blade.php die Tailwind-Klassen einmal und führe externe Attribute mit $attributes zusammen:
<button {{ $attributes->merge([
'class' => 'rounded-lg bg-indigo-600 px-4 py-2 text-sm
font-medium text-white hover:bg-indigo-700',
]) }}>
{{ $slot }}
</button>Jetzt schreibst du überall einfach <x-primary-button>Speichern</x-primary-button>. Du änderst die Klassen an einer Stelle und die Aktualisierung verbreitet sich über das gesamte Projekt. Das verbindet die Flexibilität von Tailwind mit der Ordnung des Komponentensystems von Laravel.
Das Theme anpassen und für die Produktion bauen
Wenn du markenspezifische Farben oder Schriften hinzufügen möchtest, definierst du eigene Design-Tokens mit einem @theme-Block in deiner CSS-Datei. In modernem Tailwind erfolgt die Konfiguration weitgehend in CSS:
@import "tailwindcss";
@theme {
--color-marke: #4f46e5;
--font-titel: "Inter", sans-serif;
}Nach dieser Deklaration werden Klassen wie bg-marke oder font-titel automatisch verfügbar. Für die Produktion führst du npm run build aus; das minifiziert die Assets, fügt Versionierung hinzu und schreibt in den Ordner public/build. Tailwind entfernt ungenutzte Klassen automatisch, sodass die finale CSS-Datei meist nur wenige Dutzend Kilobyte groß ist. Um nicht auf dem Server zu bauen, ist es eine gute Gewohnheit, npm run build in deinen Deploy-Schritt aufzunehmen und danach php artisan optimize auszuführen.
Häufige Fragen
Ist Vite zwingend, um Tailwind zu nutzen?
Für Laravel-Projekte in der Praxis ja, denn Laravel liefert Vite als Standard-Asset-Compiler und das offizielle @tailwindcss/vite-Plugin ist der reibungsloseste Weg. Tailwind lässt sich mit der eigenständigen CLI auch ohne Vite kompilieren, aber dann verzichtest du auf Laravels @vite-Direktive und die Vorteile des Hot Reload.
Machen so lange Klassenketten das HTML nicht unleserlich?
Anfangs kann es überladen wirken, doch sobald du wiederkehrende Muster in Blade-Komponenten und die @class-Direktive auslagerst, räumt sich das HTML in der Praxis schnell auf. Viele Entwickler lesen den Stil lieber dort, wo sie ihn sehen, als durch separate CSS-Dateien zu navigieren.
Warum ist die CSS-Datei in der Produktion so klein?
Tailwind durchsucht die Templates deines Projekts und gibt nur die Klassen aus, die du tatsächlich verwendest. Kombiniert mit der Minifizierung nach npm run build bleibt das finale CSS auf den meisten Seiten unter wenigen Dutzend Kilobyte.
Möchtest du deine Laravel-Oberfläche mit Tailwind beschleunigen? Von der Einrichtung bis zum Design-System, von der Blade-Komponentenarchitektur bis zur Produktionsoptimierung — lass uns dein Projekt gemeinsam aufbauen. Kontaktiere mich und sag mir, was du vorhast.