بعد ما عرفنا الأساسيات (Colors, Spacing, Typography…)، دلوقتي جاي وقت الـ Layouts — وده اللي بيخلي Tailwind رهيب فعلا.
بسهولة جدًا تقدر تعمل Flexbox أو Grid من غير ما تكتب ولا سطر CSS يدوي.
🔹 Flexbox في Tailwind
لو عايز تعمل عناصر جنب بعض:
flex= بيحوّل العنصر لـ flex container.gap-4= مسافة بين العناصر.- تقدر تضيف
justify-betweenأوitems-centerعشان تتحكم أكتر.
مثال:
🔹 Grid في Tailwind
لو عايز تعمل تقسيمة أعمدة وصفوف بسهولة:
grid= بيحوّل العنصر لـ grid container.grid-cols-3= 3 أعمدة متساوية.gap-4= مسافة بين العناصر.
مثال عملي:
هنا على الموبايل هيبقى عمودين، وعلى الشاشات الكبيرة (md:) هيبقى 4 أعمدة.
الخلاصة
- لو عندك عناصر قليلة عايز ترتبهم جنب بعض = Flexbox.
- لو عندك Grid system مع أعمدة وصفوف = Grid.
- Tailwind بيوفرلك Utilities جاهزة تخليك تعمل Layoutات قوية من غير ما تكتب CSS معقد.
المشاركة مع أصدقائك
قسم التعليقات