Tailwind CSS چیست؟
فریمورک CSS بهسبک Utility-First که بهجای کامپوننت آماده، کلاسهای تکمنظوره کوچک برای ساخت هر ظاهر دلخواه میدهد.
چرا مهم است؟
برخلاف Bootstrap که ظاهر از پیش تعیینشده تحمیل میکند، Tailwind کنترل کامل طراحی را دست توسعهدهنده میدهد و امروز در اکوسیستم React/Next.js عملاً استاندارد شده است.
تعریف
Tailwind CSS رویکرد Utility-First دارد: بهجای نوشتن CSS جدا یا استفاده از کامپوننت آماده، مستقیماً در HTML/JSX از کلاسهای تکمنظوره (flex, p-4, text-lg) استفاده میکنید.
مثال
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
ذخیره
</button>
چرا متفاوت است
| Bootstrap | Tailwind | |
|---|---|---|
| رویکرد | کامپوننت آماده با ظاهر مشخص | کلاسهای Utility، ظاهر کاملاً دلخواه |
| حجم خروجی | یک فایل CSS ثابت | فقط کلاسهای واقعاً استفادهشده (JIT) |
نکته مهم
Tailwind در زمان Build فقط کلاسهایی را که واقعاً در کد استفاده شدهاند وارد فایل CSS نهایی میکند (Just-In-Time Engine)؛ همین باعث حجم پایین خروجی نهایی میشود.
اشتباه رایج
❌ نوشتن رشتههای کلاس دینامیک مثل text-${color}-500 — چون Tailwind کلاسها را در زمان Build با تحلیل استاتیک متن پیدا میکند، این الگو کلاس را حذف میکند و استایل اعمال نمیشود.
منبع و مطالعه بیشتر
خلاصه
Tailwind با کلاسهای Utility در خود HTML/JSX، کنترل کامل طراحی میدهد و فقط کلاسهای استفادهشده را در خروجی نهایی نگه میدارد. از ساخت نام کلاس بهصورت دینامیک با Template String پرهیز کنید. مرجع کامل: مستندات رسمی Tailwind CSS.