Laravel Tailwind ikilisi, bir projede arayüz yazmanın en hızlı yollarından biridir: utility-first bir CSS çerçevesi olan Tailwind'i Laravel'in Vite tabanlı varlık derleyicisiyle birleştirir, sen de ayrı CSS dosyaları arasında gezinmeden doğrudan Blade içinde tasarım yaparsın. Bu yazıda Tailwind'i temiz bir Laravel projesine baştan sona kurmayı, Blade şablonlarında utility sınıflarını kullanmayı, tekrarlayan kalıpları Blade component'larıyla derli toplu hale getirmeyi ve üretim derlemesinde dosya boyutunu küçük tutmayı adım adım göstereceğim.
Neden Tailwind ve Laravel birlikte iyi çalışır
Laravel 11 ve 12, varlık derlemesi için Vite kullanır. Vite hızlı bir geliştirme sunucusu ve hot module replacement sağladığı için, sen bir sınıf eklediğinde tarayıcı neredeyse anında güncellenir. Tailwind ise hazır bileşenler değil, küçük ve tek amaçlı utility sınıfları sunar: flex, pt-4, text-center, bg-slate-900 gibi. Bu ikisi birleştiğinde HTML'den ayrılmadan, isim icat etmeden ve büyük bir CSS dosyasını şişirmeden arayüz üretirsin. Üstelik Tailwind yalnızca gerçekten kullandığın sınıfları derlediği için son CSS çıktısı genelde çok küçüktür.
Tailwind'i Laravel projesine kurmak
Yeni bir Laravel projesinde başlıyorsan, önce projeyi oluştur ve içine gir. Ardından Tailwind ve onun resmi Vite eklentisini npm ile kur. Modern Tailwind sürümlerinde kurulum, ayrı bir PostCSS yapılandırmasına gerek kalmadan tek bir Vite eklentisiyle yapılır:
npm install tailwindcss @tailwindcss/viteSonra vite.config.js dosyasını açıp Tailwind eklentisini Laravel eklentisinin yanına ekle:
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(),
],
});Tailwind'i CSS giriş dosyana dahil etmek için resources/css/app.css dosyasını aç ve içine tek satırlık import'u yaz. Modern Tailwind'de eski @tailwind base; @tailwind components; @tailwind utilities; üçlüsü yerine sade bir import kullanılır:
@import "tailwindcss";Son olarak ana Blade düzeninin <head> bölümünde varlıkları yükle. Laravel bunun için @vite direktifini sağlar:
<!DOCTYPE html>
<html lang="tr">
<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>Geliştirme sırasında npm run dev komutunu çalıştır; bu, Vite geliştirme sunucusunu açar ve sınıf değişikliklerini anında yansıtır. Aynı anda php artisan serve ile uygulamayı çalıştırırsın. Hepsi bu kadar; artık Blade'de Tailwind sınıfları kullanmaya hazırsın.
Blade şablonlarında utility sınıfları
Tailwind'in mantığı, stillemeyi doğrudan HTML elemanının class niteliğinde yapmandır. Aşağıdaki kart örneği boşluk, gölge, köşe yuvarlama ve renkleri yalnızca sınıflarla tanımlar:
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h2 class="text-lg font-semibold text-slate-900">Proje Başlığı</h2>
<p class="mt-2 text-sm text-slate-600">Kısa bir açıklama metni.</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">Detay</a>
</div>Buradaki hover:bg-indigo-700 gibi ön ekler Tailwind'in variant sistemidir. Aynı mantıkla duyarlı (responsive) tasarım için kırılım noktaları kullanırsın: sm:, md:, lg: önekleri o ekranda ve üstünde devreye girer. Örneğin grid grid-cols-1 md:grid-cols-3 küçük ekranda tek sütun, orta ve büyük ekranlarda üç sütun verir. Karanlık mod için dark: öneki vardır; dark:bg-slate-900 yalnızca karanlık temada uygulanır.
Blade dizilerini Tailwind ile birleştirmek
Tailwind salt HTML'le sınırlı değildir; Blade'in koşullu sınıf yardımcılarıyla çok iyi anlaşır. @class direktifi, bir koşula göre sınıf eklemenin temiz yoludur:
<span @class([
'rounded px-2 py-1 text-xs font-medium',
'bg-green-100 text-green-800' => $aktif,
'bg-slate-100 text-slate-500' => ! $aktif,
])>
{{ $aktif ? 'Aktif' : 'Pasif' }}
</span>Bu sayede durum rozetleri, uyarı kutuları veya seçili sekme stillerini tek bir yerde, okunabilir biçimde yönetirsin. Döngülerde de aynı utility sınıfları rahatça tekrar eder: @foreach içinde bir liste öğesini stillemek, dışarıda ayrı CSS yazmaktan çok daha hızlıdır.
Tekrarı Blade component'larıyla önlemek
Utility-first yaklaşımın en sık eleştirilen yanı, aynı uzun sınıf dizisini her yerde tekrar etmektir. Laravel'de bunun çözümü Blade component'larıdır. Bir buton component'ı oluştur:
php artisan make:component PrimaryButton --viewOluşan resources/views/components/primary-button.blade.php dosyasına Tailwind sınıflarını bir kez yaz ve $attributes ile dışarıdan gelen nitelikleri birleştir:
<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>Artık her yerde sadece <x-primary-button>Kaydet</x-primary-button> yazarsın. Sınıfları tek noktadan değiştirir, tüm projeye yayılmasını sağlarsın. Bu, Tailwind'in esnekliğini Laravel'in component sisteminin düzeniyle birleştirir.
Temayı özelleştirmek ve üretim derlemesi
Markaya özel renkler veya fontlar eklemek istediğinde, CSS dosyanda @theme bloğu kullanarak kendi tasarım belirteçlerini (token) tanımlarsın. Modern Tailwind'de yapılandırma büyük ölçüde CSS içinde yapılır:
@import "tailwindcss";
@theme {
--color-marka: #4f46e5;
--font-baslik: "Inter", sans-serif;
}Bu tanımdan sonra bg-marka veya font-baslik gibi sınıflar otomatik kullanılabilir hale gelir. Üretime çıkarken npm run build komutunu çalıştırırsın; bu, varlıkları küçültür, sürüm bilgisi (versioning) ekler ve public/build klasörüne yazar. Tailwind kullanılmayan sınıfları otomatik eler, bu yüzden son CSS dosyası çoğunlukla birkaç on kilobayttan ibarettir. Sunucuda derleme yapmamak için npm run build'i deploy adımına dahil etmen, ardından php artisan optimize çalıştırman iyi bir alışkanlıktır.
Sık Sorulan Sorular
Tailwind kullanmak için Vite zorunlu mu?
Laravel projeleri için pratikte evet, çünkü Laravel varsayılan varlık derleyicisi olarak Vite'i sağlar ve resmi @tailwindcss/vite eklentisi en pürüzsüz yoldur. Vite'siz, saf CLI ile de Tailwind derlenebilir ama Laravel'in @vite direktifi ve hot reload avantajlarından mahrum kalırsın.
Bu kadar uzun sınıf dizileri HTML'i okunmaz yapmaz mı?
Başta kalabalık görünebilir, ama pratikte tekrarlayan kalıpları Blade component'larına ve @class direktifine taşıdığında HTML hızla derli toplu olur. Birçok geliştirici, stili gördüğü yerde okuyabilmeyi ayrı CSS dosyalarında gezinmeye tercih eder.
Üretimdeki CSS dosyası neden bu kadar küçük?
Tailwind, projendeki şablonları tarar ve yalnızca gerçekten kullandığın sınıfları çıktıya koyar. npm run build sonrası minify ile birleşince, çoğu sitede son CSS birkaç on kilobaytı geçmez.
Laravel arayüzünü Tailwind ile hızlandırmak mı istiyorsun? Kurulumdan tasarım sistemine, Blade component mimarisinden üretim optimizasyonuna kadar projeni birlikte kuralım. Benimle iletişime geç ve ne yapmak istediğini anlat.