بعد ما جهزنا المشروع وركبنا Tailwind لازم نفهم الفكرة الأساسية اللي Tailwind مبني عليها: Utility-First Design.
🔹 يعني إيه Utility Classes؟
بدل ما تكتب CSS بنفسك زي:
وتستدعيها في HTML:
في Tailwind بتكتب الكلاسات مباشرة في العنصر:
🔹 ليه ده مختلف؟
أسرع في التطوير: مش محتاج تفصل بين CSS و HTML.- مرونة عالية: أي تعديل بيتم في نفس اللحظة على العنصر.
- إتساق: كل العناصر بتستخدم نفس system من الكلاسات الجاهزة.
- تقليل الـ CSS: مش بتعمل كلاسات جديدة على الفاضي.
🔹 مثال عملي
لو عاوز تعمل Card بسيط:
-
bg-white= خلفية بيضا. -
shadow-md= شادو متوسط. -
rounded-xl= زوايا مدوّرة. -
p-6= padding داخلي. -
text-xl font-bold mb-2= ستايل العنوان.
🔹 Utility-First = Lego 🧩
فكر في Tailwind زي قطع LEGO:
-
كل كلاس = قطعة صغيرة.
-
تقدر تبني أي شكل معقد بمجرد إنك تركب القطع مع بعض.
المشاركة مع أصدقائك
قسم التعليقات