Het duo Laravel Tailwind is een van de snelste manieren om een interface in een project te bouwen: het combineert Tailwind, een utility-first CSS-framework, met Laravels op Vite gebaseerde asset-compiler, zodat je rechtstreeks in Blade kunt ontwerpen in plaats van tussen losse stylesheets te springen. In dit artikel loop ik stap voor stap met je door het installeren van Tailwind in een schoon Laravel-project van begin tot eind, het gebruik van utility-klassen in Blade-templates, het opruimen van herhaalde patronen met Blade-componenten en het klein houden van je productiebundel.
Waarom Tailwind en Laravel goed samengaan
Laravel 11 en 12 gebruiken Vite om assets te compileren. Omdat Vite een snelle dev-server met hot module replacement bevat, werkt de browser bijna direct bij zodra je een klasse toevoegt. Tailwind geeft je op zijn beurt kleine utility-klassen met één doel in plaats van kant-en-klare componenten: dingen als flex, pt-4, text-center en bg-slate-900. Samen bouw je interfaces zonder je HTML te verlaten, zonder namen te verzinnen en zonder één enorme stylesheet op te blazen. En omdat Tailwind alleen de klassen compileert die je daadwerkelijk gebruikt, is de uiteindelijke CSS-uitvoer meestal piepklein.
Tailwind installeren in een Laravel-project
Als je met een vers Laravel-project begint, maak het dan eerst aan en ga erin. Installeer vervolgens Tailwind en zijn officiële Vite-plugin via npm. In moderne Tailwind-versies gebeurt de installatie met één enkele Vite-plugin, zonder aparte PostCSS-configuratie:
npm install tailwindcss @tailwindcss/viteOpen daarna vite.config.js en voeg de Tailwind-plugin naast de Laravel-plugin toe:
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(),
],
});Om Tailwind in je CSS-invoerbestand op te nemen, open je resources/css/app.css en voeg je één importregel toe. Moderne Tailwind gebruikt een eenvoudige import in plaats van het oude trio @tailwind base; @tailwind components; @tailwind utilities;:
@import "tailwindcss";Laad ten slotte de assets in de <head> van je hoofd-Blade-layout. Laravel biedt hiervoor de @vite-directive:
<!DOCTYPE html>
<html lang="nl">
<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>Tijdens de ontwikkeling draai je npm run dev; dit start de Vite-dev-server en weerspiegelt klassewijzigingen direct. Tegelijk draai je de applicatie met php artisan serve. Dat is alles — je bent klaar om Tailwind-klassen in Blade te gebruiken.
Utility-klassen in Blade-templates
Het idee van Tailwind is dat je rechtstreeks in het class-attribuut van het element stylet. De onderstaande kaart definieert ruimte, schaduw, afgeronde hoeken en kleuren uitsluitend met klassen:
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h2 class="text-lg font-semibold text-slate-900">Projecttitel</h2>
<p class="mt-2 text-sm text-slate-600">Een korte beschrijving.</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>Voorvoegsels als hover:bg-indigo-700 vormen het variant-systeem van Tailwind. Dezelfde logica drijft responsive ontwerp aan via breekpunten: de voorvoegsels sm:, md: en lg: treden in werking op dat schermformaat en groter. Zo geeft grid grid-cols-1 md:grid-cols-3 één kolom op kleine schermen en drie kolommen op middelgrote en grote schermen. Voor donkere modus is er het voorvoegsel dark:; dark:bg-slate-900 wordt alleen toegepast in het donkere thema.
Blade-directives combineren met Tailwind
Tailwind is niet beperkt tot kale HTML; het gaat uitstekend samen met Blades helpers voor voorwaardelijke klassen. De @class-directive is een nette manier om klassen op basis van een voorwaarde toe te voegen:
<span @class([
'rounded px-2 py-1 text-xs font-medium',
'bg-green-100 text-green-800' => $actief,
'bg-slate-100 text-slate-500' => ! $actief,
])>
{{ $actief ? 'Actief' : 'Inactief' }}
</span>Hiermee beheer je statusbadges, waarschuwingsvakken of de stijl van het actieve tabblad op één leesbare plek. Dezelfde utility-klassen herhalen zich moeiteloos binnen loops: een lijstitem stylen binnen @foreach is veel sneller dan elders aparte CSS schrijven.
Herhaling voorkomen met Blade-componenten
De meestgehoorde kritiek op de utility-first-aanpak is het overal herhalen van diezelfde lange reeks klassen. In Laravel is het antwoord Blade-componenten. Maak een knopcomponent:
php artisan make:component PrimaryButton --viewSchrijf in het gegenereerde bestand resources/views/components/primary-button.blade.php de Tailwind-klassen één keer en voeg externe attributen samen met $attributes:
<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>Nu schrijf je overal simpelweg <x-primary-button>Opslaan</x-primary-button>. Je wijzigt de klassen op één plek en de update verspreidt zich over het hele project. Dit verenigt de flexibiliteit van Tailwind met de ordening van Laravels componentsysteem.
Het thema aanpassen en bouwen voor productie
Als je merkspecifieke kleuren of lettertypen wilt toevoegen, definieer je je eigen design-tokens met een @theme-blok in je CSS-bestand. In moderne Tailwind gebeurt configuratie grotendeels in CSS:
@import "tailwindcss";
@theme {
--color-merk: #4f46e5;
--font-kop: "Inter", sans-serif;
}Na deze declaratie worden klassen als bg-merk of font-kop automatisch beschikbaar. Om naar productie te gaan draai je npm run build; dit minificeert de assets, voegt versionering toe en schrijft naar de map public/build. Tailwind verwijdert ongebruikte klassen automatisch, dus het uiteindelijke CSS-bestand is meestal maar een paar tientallen kilobytes. Om niet op de server te bouwen, is het een goede gewoonte om npm run build in je deploy-stap op te nemen en daarna php artisan optimize te draaien.
Veelgestelde vragen
Is Vite vereist om Tailwind te gebruiken?
Voor Laravel-projecten in de praktijk wel, want Laravel levert Vite als standaard asset-compiler en de officiële @tailwindcss/vite-plugin is de soepelste route. Tailwind kan met de losse CLI zonder Vite worden gecompileerd, maar dan geef je Laravels @vite-directive en de voordelen van hot reload op.
Maken zulke lange reeksen klassen de HTML niet onleesbaar?
Het kan in het begin druk lijken, maar zodra je terugkerende patronen naar Blade-componenten en de @class-directive verplaatst, ruimt de HTML in de praktijk snel op. Veel ontwikkelaars lezen de stijl liever daar waar ze hem zien dan dat ze door aparte CSS-bestanden navigeren.
Waarom is het CSS-bestand in productie zo klein?
Tailwind scant de templates van je project en geeft alleen de klassen uit die je echt gebruikt. Gecombineerd met minificatie na npm run build blijft de uiteindelijke CSS op de meeste sites onder een paar tientallen kilobytes.
Wil je je Laravel-interface met Tailwind versnellen? Van installatie tot een design system, van Blade-componentarchitectuur tot productieoptimalisatie, laten we je project samen bouwen. Neem contact op en vertel me wat je in gedachten hebt.