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

Component Pattern و Reuse

ساخت Card قابل استفاده مجدد

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

محتوای درس ساخت Card قابل استفاده مجدد

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

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

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

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

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

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

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

Component.jsx
function CourseCard({ title, description }) {
  return (
    <article className="rounded-2xl border bg-white p-5 shadow-sm transition hover:shadow-lg">
      <h3 className="text-lg font-bold text-slate-900">{title}</h3>
      <p className="mt-2 line-clamp-2 text-sm leading-6 text-slate-600">{description}</p>
    </article>
  );
}

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

Card دوره با Style یکپارچه و قابل استفاده مجدد.

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

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

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

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

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