Bootstrap در مقابل Tailwind — کدام برای پروژه Laravel مناسبتر است؟
سوال «فرانت را با چه چیزی بزنیم؟» در شروع هر پروژه Laravel تکرار میشود. Bootstrap هنوز در پروژههای شرکتی ایران زیاد است؛ Tailwind در استارتاپها و پنلهای مدرن. هر دو با Vite و Blade کار میکنند — تفاوت در سرعت اولیه، کنترل design و فرهنگ تیم است.
Bootstrap 5 — خلاصه
کامپوننت آماده: navbar، modal، card، grid. با کلاسهای از پیش طراحیشده سریع صفحه میسازید. یادگیری برای مبتدی آسانتر. تمهای RTL برای فارسی موجود است.
<div class="container">
<div class="row">
<div class="col-md-6">محتوا</div>
</div>
</div>Tailwind CSS — خلاصه
Utility-first: flex، pt-4، text-gray-700. design system در tailwind.config.js. سفارشیسازی ظاهر منحصربهفرد راحتتر؛ HTML شلوغتر به نظر میرسد.
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-2xl font-bold text-slate-900">عنوان</h1>
</div>جدول مقایسه در Laravel
| معیار | Bootstrap | Tailwind |
|---|---|---|
| سرعت MVP | بالا | متوسط |
| UI منحصربهفرد | نیاز به override زیاد | عالی |
| حجم CSS نهایی | بسته به import | Purge → کوچک |
| Filament | جدا (خود Filament Tailwind است) | همخوان با Filament |
| تیم قدیمی jQuery/Bootstrap | راحت | منحنی یادگیری |
Laravel + Vite
هر دو با npm install bootstrap یا npm install tailwindcss و تنظیم vite.config.js ادغام میشوند. پیشفرض Laravel 12 Tailwind-friendly است.
کی Bootstrap؟
- سایت شرکتی با deadline کوتاه
- تیم بدون frontend اختصاصی
- مشتری UI شبیه قالبهای آشنا میخواهد
- یکپارچگی با قالبهای admin آماده Bootstrap
کی Tailwind؟
- برند اختصاصی و design system
- استفاده از Filament / Livewire Flux
- تیم به utility-first عادت دارد
- بهینهسازی حجم CSS برای performance
برای performance کلی: بهینهسازی Laravel و Core Web Vitals.
آیا میتوان ترکیب کرد؟
فنی بله؛ عملاً توصیه نمیشود — conflict کلاس و bundle بزرگ. یکی را انتخاب کنید.
Blade Components
با Blade component کلاسهای تکراری را encapsulate کنید — چه Bootstrap چه Tailwind:
<x-button variant="primary">ارسال</x-button>تجربه بازار ایران
فریلنس شرکتی: اغلب Bootstrap. محصول و SaaS: Tailwind + Filament. هزینه پروژه به design اختصاصی بستگی دارد — Tailwind معمولاً زمان UI بیشتر میخواهد.
جمعبندی
Bootstrap = سرعت و آشنایی. Tailwind = کنترل و مدرن بودن. برای Laravel هر دو معتبرند. ساختار: resources/views. شروع پروژه: چکلیست.