فلسفة Utility-First

الفكرة

في CSS التقليدي تخترع اسمًا لكل عنصر، ثم تكتب تنسيقه في ملف آخر. في Tailwind تبني التصميم من أصناف صغيرة جاهزة، كل واحد يفعل شيئًا واحدًا، مباشرة في HTML:

<!-- الطريقة التقليدية -->
<div class="card">...</div>
<style>
  .card { padding: 1rem; border-radius: 0.5rem; background: white; }
</style>

<!-- طريقة Tailwind -->
<div class="p-4 rounded-lg bg-white">...</div>

قراءة الأصناف

كل صنف خاصية CSS واحدة تقريبًا، واسمه يصفها:

<div class="flex items-center gap-2 p-4 bg-gray-100 rounded-lg">
  <img class="size-10 rounded-full" src="/avatar.jpg" alt="">
  <span class="font-bold">براء</span>
</div>

بعد أسبوع من الاستخدام تقرأ هذا السطر كما تقرأ CSS: صف مرن، عناصر في المنتصف، فراغ صغير، حشو، خلفية رمادية فاتحة، زوايا مستديرة. لاحظ: التعليقات لا توضع داخل قيمة class، لأن المتصفّح يعاملها كأسماء أصناف عادية.

لماذا هذا أفضل؟

• لا تخترع أسماء: لا .card-wrapper-inner-2، ولا تفكير في هل .btn-primary مستخدم في مكان آخر.
• لا تتنقّل بين الملفات: التنسيق أمامك بجوار العنصر.
• تغيير آمن: حذف صنف من عنصر يؤثّر عليه وحده. في CSS التقليدي، تعديل .card قد يكسر صفحة لم تفتحها منذ شهور.
• اتّساق مفروض: المسافات والألوان من مقياس محدّد (p-4 وp-6، لا padding: 17px مرة و18px مرة)، فيبدو الموقع متناسقًا تلقائيًا.
• CSS لا يكبر: Tailwind يولّد فقط ما تستخدمه. الموقع الذي فيه مئة صفحة يستخدم نفس الأصناف تقريبًا، فيبقى ملف CSS صغيرًا.

"لكن هذا مثل الـ style المضمّن!"

الاعتراض الأشهر، والفرق جوهري:

والتكرار؟

نعم، الزر نفسه في عشرين مكانًا يعني تكرار نفس الأصناف. الحل ليس العودة لـ CSS، بل المكوّنات: اصنع مكوّن Button في React أو Vue مرة واحدة، أو حلقة في القالب. التفاصيل في درس استخراج المكوّنات.

متى لا يناسب Tailwind؟

• محتوى HTML يأتي من مكان لا تتحكّم فيه (مقال من نظام إدارة محتوى): استخدم إضافة typography وصنف prose (درس النماذج والإضافات).
• فريق يرفض تمامًا فكرة الأصناف الكثيرة: الأداة الجيدة لا تفيد إذا قاومها الفريق.

أخطاء شائعة

• تعليقات داخل class: تصبح أسماء أصناف وهمية. ضع التعليق قبل العنصر.
• إعادة كتابة كل شيء بـ @apply: تعود لنفس مشاكل CSS التقليدي بخطوة إضافية.
• قيم اعتباطية لكل شيء (p-[17px]): تكسر الاتّساق. استخدم المقياس، والقيم الاعتباطية للاستثناءات فقط.
• الحكم من أول يوم: القراءة تصبح سريعة بعد أيام قليلة من الاستخدام.

🎯 التالي: الألوان.