التخطيط والتصميم المتجاوب

Flexbox

<div class="flex items-center justify-between">
  <span>يمين</span>
  <span>يسار</span>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

التصميم المتجاوب (Responsive)

نضيف بادئات للشاشات المختلفة:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- عمود على الجوال، عمودان على التابلت، ثلاثة على الشاشات الكبيرة -->
</div>

💡 Tailwind يتبع نهج "الجوال أولًا" — اكتب للجوال ثم أضف بادئات للأكبر.

الحالات التفاعلية

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2">
  زر تفاعلي
</button>

مثال متكامل

<div class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg
            hover:shadow-2xl transition">
  <h2 class="text-xl font-bold mb-2">بطاقة</h2>
  <p class="text-gray-600">محتوى البطاقة هنا.</p>
</div>

🎉 أكملت أساسيات Tailwind CSS! أصبحت قادرًا على بناء واجهات جميلة ومتجاوبة بسرعة. اختبر نفسك واحصل على شهادتك.