التنظيم
- رتّب الأصناف منطقيًّا (تخطيط ← مسافات ← ألوان ← حالات).
- استخدم إضافة Prettier لترتيب أصناف Tailwind تلقائيًّا.
إعادة الاستخدام
- استخرج المكوّنات المتكرّرة إلى مكوّنات إطار (React/Vue).
- استخدم
@applyباعتدال للعناصر الشائعة جدًّا فقط.
الاتّساق
- استخدم قيم الثيم (المسافات والألوان) بدل القيم الاعتباطية قدر الإمكان.
- عرّف ألوان علامتك في الإعداد واستخدمها بأسماء واضحة.
الأداء
- Tailwind يزيل الأصناف غير المستخدمة تلقائيًّا (الملف صغير).
- تجنّب توليد أصناف ديناميكية بسلاسل غير مكتملة (
bg-${color}قد لا يُكتشف).
العربية و RTL
- اضبط
dir="rtl"على<html>. - استخدم
ms-/me-/ps-/pe-(منطقية) بدلml-/mr-. - استخدم
text-start/text-endبدلtext-left/text-right.
التجاوب والوصول
- صمّم mobile-first، واختبر على أحجام مختلفة.
- حافظ على تباين ألوان كافٍ، واستخدم
focus:للوصول بلوحة المفاتيح.
🎯 التالي: خلاصة المسار.