🔹 Utility-First یعنی چی؟

در Tailwind به جای اینکه برای هر کامپوننت یک فایل CSS جدا بنویسی، از کلاس‌های آماده (Utility Classes) استفاده می‌کنی.
هر کلاس یک وظیفه‌ی خیلی مشخص داره (مثل رنگ، اندازه فونت، فاصله و …).

🔹 نمونه کد (بدون Tailwind – CSS سنتی)

<style>
  .btn {
    background: #4CAF50;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
  }
</style>

<button class="btn">Click Me</button>

📌 در این حالت برای هر دکمه یک کلاس CSS جدا تعریف کردیم.

🔹 نمونه کد (با Tailwind – Utility-First)

<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-lg">
  Click Me
</button>

📌 اینجا به جای ساختن کلاس جدید، فقط از کلاس‌های آماده‌ی Tailwind استفاده کردیم.

🔹 مزایای Utility-First

• سرعت بالا → بدون نیاز به نوشتن CSS سفارشی

• انعطاف‌پذیری → ترکیب کلاس‌ها برای ساخت هر نوع طراحی

• یکنواختی در طراحی → همه چیز استاندارد و هماهنگ میشه

• کاهش حجم CSS → فقط کلاس‌های استفاده‌شده توی خروجی می‌مونن

🔹 ترکیب چند Utility

در Tailwind می‌تونی با چند کلاس کنار هم، هر استایلی رو بسازی:

<div class="bg-blue-200 p-6 rounded-xl shadow-md">
  <h2 class="text-xl font-semibold mb-2">Title</h2>
  <p class="text-gray-700">This is a card built with utility classes.</p>
</div>

✅ بدون نوشتن حتی یک خط CSS سفارشی، یه کارت کامل طراحی شد.

🔹 نکته مهم

• Utility-First به معنی حذف کامل CSS سفارشی نیست → ولی بیشتر وقت‌ها دیگه لازم نمی‌شه CSS بنویسی.

• برای پروژه‌های بزرگ، Utility-First باعث میشه تیم‌ها راحت‌تر و سریع‌تر توسعه بدن.

• Tailwind به خاطر همین فلسفه‌ی Utility-First محبوب شده.