className و Conditional Class

className و Conditional Class را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

در React کلاس‌ها با className نوشته می‌شوند و باید رشته‌های کامل Utility در Source وجود داشته باشند. Conditional Class بهتر است از Map مشخص Variantها ساخته شود تا هم Scanner آن‌ها را ببیند و هم ترکیب‌ها قابل تست بمانند.

روش پیاده‌سازی

1. ساختار Component و Props را تعریف کنید.
2. هر Variant را به رشته کامل و ایستا از کلاس‌ها نگاشت کنید.
3. Layout را از Componentهای کوچک مانند KpiCard بسازید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

function StatusBadge({ active }) {
  return (
    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${
      active ? "bg-emerald-100 text-emerald-700" : "bg-slate-100 text-slate-600"
    }`}>
      {active ? "فعال" : "غیرفعال"}
    </span>
  );
}

خروجی مورد انتظار

Badge با Style متفاوت بر اساس State.

نکات مهم و خطاهای رایج

• عبارت‌هایی مانند bg-${color}-600 توسط Scanner قابل اتکا نیستند.
• رشته کلاس بسیار طولانی را بدون مرز Component تکرار نکنید.

تمرین پیشنهادی

برای مثال یک State خطا و چیدمان تک‌ستونه موبایل اضافه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS