فصل 17 از 27 درس 1 از 2

Component Pattern و Reuse

استخراج Component به جای @apply افراطی

بخشی از آموزش جامع Tailwind CSS

محتوای درس استخراج Component به جای @apply افراطی

استخراج Component به جای @apply افراطی را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

استخراج Component زمانی مفید است که ساختار، رفتار یا ترکیب کلاس‌ها تکرار می‌شود. @apply نباید صرفاً برای مخفی‌کردن Utilityها استفاده شود؛ در React یا Vue معمولاً Component و Variant Map خواناتر است.

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

  1. الگوی واقعاً تکرارشونده را پیدا کنید.
  2. Base Style و Variantها را جدا کنید.
  3. API کوچک و قابل پیش‌بینی برای Component بسازید.

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

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

Component.jsx
function Button({ children, variant = "primary" }) {
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    ghost: "bg-transparent text-slate-700 hover:bg-slate-100",
  };

  return (
    <button className={`rounded-xl px-4 py-2 font-medium transition ${variants[variant]}`}>
      {children}
    </button>
  );
}

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

Button قابل استفاده مجدد با Variant.

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

  • Component یک‌بارمصرف فقط لایه انتزاعی اضافه می‌کند.
  • ساخت کلاس پویا با تکه‌های ناقص ممکن است توسط Scanner تشخیص داده نشود.

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

برای Card یا Button دو Variant و یک حالت Disabled اضافه کنید.

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