NahdaAIنهضة
Tailwind CSS • المستوى الثالث • الدرس 1

التصميم المتجاوب ونقاط التوقف (Responsive Breakpoints)

العودة لفهرس المستوى

أهداف الدرس

  • فهم فلسفة Mobile-First التي تبدأ بالتنسيق الافتراضي للشاشات الصغيرة.
  • تعديل الشاشات عند النقاط المحددة باستخدام البادئات sm: (640px)، md: (768px)، lg: (1024px).
  • إخفاء/إظهار العناصر تلقائياً بـ hidden md:block و md:hidden.
  • إعادة ترتيب العناصر بصرياً حسب الشاشة بـ order-1 md:order-2.

1. منهجية التجاوب البسيطة في Tailwind

بدلاً من كتابة Media Queries معقدة، يتيح لك Tailwind إضافة البادئات مباشرة قبل الكلاس، مثل grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ليكون عموداً بالهاتف، عمودين بالحاسوب المحمول، وثلاثة بالشاشات الكبيرة.

html
<!-- Mobile-First Approach -->
<div class="text-base md:text-lg lg:text-xl">
  خط يزداد حجماً تلقائياً
</div>

<!-- نقاط التوقف الرئيسية -->
<!-- sm:  >= 640px  (الجوال الأفقي) -->
<!-- md:  >= 768px  (الأجهزة اللوحية) -->
<!-- lg:  >= 1024px (الحاسوب المحمول) -->
<!-- xl:  >= 1280px (الحاسوب المكتبي) -->
<!-- 2xl: >= 1536px (شاشات كبيرة جداً) -->

<!-- إخفاء/إظهار متجاوب -->
<div class="hidden md:block">ظاهر من md+</div>
<div class="md:hidden">ظاهر على الجوال فقط</div>

2. مرجع نقاط التوقف في Tailwind

نقاط التوقف الرئيسية
  • sm: — 640px وأكبر
  • md: — 768px وأكبر
  • lg: — 1024px وأكبر
  • xl: — 1280px وأكبر
  • 2xl: — 1536px وأكبر
الشبكة المتجاوبة
  • grid-cols-1 — جوال
  • md:grid-cols-2 — جهاز لوحي
  • lg:grid-cols-3 — حاسوب
  • xl:grid-cols-4 — شاشات كبيرة
إظهار/إخفاء
  • hidden — مخفي دائماً
  • md:block — ظاهر من md+
  • md:hidden — مخفي من md+
  • lg:flex — Flex من lg+
إعادة الترتيب
  • order-1 — الترتيب 1
  • md:order-2 — ترتيب مختلف من md+
  • flex-col md:flex-row — اتجاه متجاوب

3. مثال كامل: بطاقة متجاوبة بكل الأنماط

html
<div class="p-4 md:p-8 lg:p-12">
  <h2 class="text-xl md:text-2xl lg:text-4xl">
    عنوان متجاوب
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div>بطاقة 1</div>
    <div>بطاقة 2</div>
    <div>بطاقة 3</div>
  </div>

  <div class="hidden lg:block">
    شريط جانبي على الشاشات الكبيرة فقط
  </div>
</div>
التطبيق العملي المباشر

تحدي الدرس الأول: بناء صفحة متجاوبة كاملة

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

  1. غيّر نقاط التوقف من sm:grid-cols-2 إلى md:grid-cols-2.
  2. أضف space-y-6 p-4 للحاوية الرئيسية (غلّف الكل داخل <div>).
  3. أضف عنواناً في الأعلى بـ text-2xl md:text-4xl lg:text-5xl font-extrabold text-center.
  4. أضف 3 بطاقات جديدة (4, 5, 6) بألوان text-amber-400, text-rose-400, text-cyan-400.
  5. أضف صندوقاً بحشوة متجاوبة: p-4 md:p-8 lg:p-12.
  6. أضف صندوقين متجاوبين: واحد بـ hidden md:block وواحد بـ md:hidden.
⏳ جارٍ تحميل المحرر التفاعلي...
فهرس المستوىالانتقال للدرس الثاني