استخراج المكوّنات

المشكلة

تكرار نفس قائمة الأصناف الطويلة في أماكن كثيرة.

الحلّ 1: مكوّن في الإطار (الأفضل)

في React/Vue، اصنع مكوّنًا:

function Button({ children }) {
  return (
    <button className="rounded-lg bg-purple-600 px-4 py-2 text-white
                       hover:bg-purple-700 transition">
      {children}
    </button>
  );
}

تكتب الأصناف مرّة وتعيد استخدام المكوّن.

الحلّ 2: @apply في CSS

.btn {
  @apply rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700;
}

<button class="btn">زر</button>

💡 يوصي Tailwind بمكوّنات الإطار أوّلًا، واستخدام @apply باعتدال (للعناصر المتكرّرة جدًّا كالأزرار والمدخلات).

تجنّب الإفراط في @apply

الإفراط يعيدك لمشاكل CSS التقليدية (أسماء أصناف، ملفّات منفصلة). الأصناف المباشرة غالبًا أوضح.

🎯 التالي: النماذج والإضافات.