التصميم المستجيب ونقاط التوقف

إتقان التصميم المستجيب في Tailwind CSS

التصميم المستجيب ضروري في تطوير الويب الحديث. مع وصول المستخدمين إلى مواقع الويب من أجهزة بجميع الأحجام، يجب أن تتكيف تصميماتك بسلاسة. يجعل Tailwind CSS التصميم المستجيب بديهياً بنظام نقاط التوقف الذي يعطي الأولوية للموبايل والذي يسمح لك بتطبيق أنماط مختلفة على أحجام شاشات مختلفة.

فهم نهج Mobile-First

يستخدم Tailwind نظام نقاط توقف يعطي الأولوية للموبايل. هذا يعني أن الأدوات بدون بادئة تنطبق على جميع أحجام الشاشات، بينما الأدوات المسبوقة ببادئة تنطبق فقط عند نقطة التوقف المحددة وما فوقها:

<!-- هذا النص صغير على الموبايل، كبير على التابلت وما فوق -->
<p class="text-sm md:text-lg">
  نص مستجيب ينمو مع حجم الشاشة
</p>

<!-- موبايل: مكدس عمودياً، سطح المكتب: جنباً إلى جنب -->
<div class="flex flex-col md:flex-row">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>

<!-- مخفي على الموبايل، مرئي على سطح المكتب -->
<div class="hidden lg:block">
  هذا المحتوى يظهر فقط على الشاشات الكبيرة
</div>

نقاط التوقف الافتراضية في Tailwind

يوفر Tailwind خمس نقاط توقف افتراضية تغطي معظم أحجام الأجهزة الشائعة:

بادئة نقطة التوقف | العرض الأدنى | معادل CSS
--------------------|--------------|----------------------------
sm                  | 640px        | @media (min-width: 640px)
md                  | 768px        | @media (min-width: 768px)
lg                  | 1024px       | @media (min-width: 1024px)
xl                  | 1280px       | @media (min-width: 1280px)
2xl                 | 1536px       | @media (min-width: 1536px)

إرشادات الأجهزة:
- (بدون بادئة)    : هواتف محمولة (0px - 639px)
- sm:              : هواتف كبيرة، أجهزة لوحية صغيرة (640px+)
- md:              : أجهزة لوحية (768px+)
- lg:              : أجهزة كمبيوتر محمولة صغيرة، أجهزة لوحية أفقية (1024px+)
- xl:              : أجهزة سطح المكتب (1280px+)
- 2xl:             : أجهزة سطح مكتب كبيرة (1536px+)

<!-- تطبيق حشو مختلف عند نقاط توقف مختلفة -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  يزيد الحشو مع حجم الشاشة
</div>

<!-- عرض مستجيب -->
<div class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
  يتناقص العرض مع زيادة حجم الشاشة
</div>

<!-- محاذاة نص مستجيبة -->
<p class="text-center md:text-left">
  مركزي على الموبايل، محاذاة لليسار على التابلت وما فوق
</p>

<!-- عرض مستجيب -->
<div class="block md:flex lg:grid">
  أنظمة تخطيط مختلفة عند نقاط توقف مختلفة
</div>

الطباعة المستجيبة

اضبط حجم النص ووزنه ومحاذاته بناءً على حجم الشاشة:

<!-- عنوان يتناسب مع إطار العرض -->
<h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold">
  عنوان مستجيب
</h1>

<!-- نص جسم بحجم مستجيب -->
<p class="text-sm md:text-base lg:text-lg">
  ينمو نص هذه الفقرة أكبر على الشاشات الأكبر لسهولة القراءة بشكل أفضل.
</p>

<!-- ارتفاع السطر المستجيب -->
<p class="leading-tight md:leading-normal lg:leading-relaxed">
  يتكيف ارتفاع السطر لتجربة قراءة مثلى.
</p>

<!-- وزن الخط المستجيب -->
<span class="font-normal md:font-medium lg:font-semibold">
  يزداد التأكيد مع حجم الشاشة
</span>

<!-- وسط على الموبايل، يسار على سطح المكتب -->
<h2 class="text-center lg:text-left">عنوان المقال</h2>

<!-- محاذاة لليمين على سطح المكتب، وسط على الموبايل -->
<p class="text-center md:text-right">نُشر في 15 يناير 2026</p>

<!-- مضبوط على الشاشات الكبيرة فقط -->
<p class="text-left lg:text-justify">
  نص فقرة طويلة يصبح مضبوطاً على الشاشات الأكبر...
</p>

المسافات المستجيبة

تحكم في الحشو والهامش والفجوة على أحجام شاشات مختلفة:

<!-- زيادة الحشو مع حجم الشاشة -->
<section class="px-4 md:px-6 lg:px-8 py-8 md:py-12 lg:py-16">
  مساحة تنفس أكبر على الشاشات الأكبر
</section>

<!-- هامش مستجيب -->
<div class="mb-4 md:mb-6 lg:mb-8">
  فجوات أكبر بين الأقسام على الشاشات الأكبر
</div>

<!-- فجوة مستجيبة في flex/grid -->
<div class="flex gap-2 md:gap-4 lg:gap-6">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- حاوية مع حشو مستجيب -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- محتوى مع حشو جانبي مناسب لجميع الشاشات -->
</div>

تخطيط مستجيب: Flexbox

غيّر اتجاه flex والمحاذاة والالتفاف عند نقاط توقف مختلفة:

<!-- مكدس على الموبايل، صف على سطح المكتب -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">محتوى 1</div>
  <div class="flex-1">محتوى 2</div>
  <div class="flex-1">محتوى 3</div>
</div>

<!-- التفاف flex مستجيب -->
<div class="flex flex-wrap md:flex-nowrap gap-4">
  <!-- العناصر تلتف على الموبايل، تبقى في سطر واحد على سطح المكتب -->
</div>

<!-- التبرير المستجيب -->
<nav class="flex justify-center md:justify-between items-center">
  <div>الشعار</div>
  <div>القائمة</div>
</nav>

<!-- ترتيب مستجيب -->
<div class="flex flex-col">
  <div class="order-2 md:order-1">يظهر أولاً على سطح المكتب، ثانياً على الموبايل</div>
  <div class="order-1 md:order-2">يظهر أولاً على الموبايل، ثانياً على سطح المكتب</div>
</div>

<!-- مثال تخطيط بطاقة -->
<div class="flex flex-col lg:flex-row gap-6">
  <article class="lg:w-2/3 bg-white rounded-lg shadow p-6">
    <h2 class="text-2xl font-bold mb-4">المقال الرئيسي</h2>
    <p>عرض كامل على الموبايل، عرض 2/3 على سطح المكتب</p>
  </article>
  <aside class="lg:w-1/3 bg-gray-100 rounded-lg p-6">
    <h3 class="font-bold mb-4">الشريط الجانبي</h3>
    <p>عرض كامل على الموبايل، عرض 1/3 على سطح المكتب</p>
  </aside>
</div>

تخطيط مستجيب: Grid

غيّر أعمدة الشبكة والامتدادات والفجوات بشكل مستجيب:

<!-- عمود واحد موبايل، 2 تابلت، 3 سطح مكتب، 4 سطح مكتب كبير -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow p-4">بطاقة 1</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 2</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 3</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 4</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 5</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 6</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 7</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 8</div>
</div>

<!-- امتدادات أعمدة مستجيبة -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
  <!-- عرض كامل على الموبايل، 8 أعمدة على سطح المكتب -->
  <main class="lg:col-span-8 bg-white rounded-lg shadow p-6">
    <h1 class="text-3xl font-bold mb-4">المحتوى الرئيسي</h1>
    <p>محتوى المقال...</p>
  </main>

  <!-- عرض كامل على الموبايل، 4 أعمدة على سطح المكتب -->
  <aside class="lg:col-span-4 space-y-4">
    <div class="bg-white rounded-lg shadow p-4">أداة 1</div>
    <div class="bg-white rounded-lg shadow p-4">أداة 2</div>
  </aside>
</div>

<!-- فجوة مستجيبة -->
<div class="grid grid-cols-2 gap-2 md:gap-4 lg:gap-6 xl:gap-8">
  <!-- تزداد الفجوة مع حجم الشاشة -->
</div>

<!-- شبكة منتجات تتكيف بشكل جميل -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
  <!-- منتج مميز يمتد على عمودين على الشاشات الأكبر -->
  <div class="sm:col-span-2 lg:col-span-2 xl:col-span-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
    <h3 class="text-2xl font-bold mb-2">منتج مميز</h3>
    <p class="mb-4">عرض خاص - خصم 50%!</p>
    <button class="px-6 py-2 bg-white text-blue-600 rounded font-semibold">
      تسوق الآن
    </button>
  </div>

  <!-- منتجات عادية -->
  <div class="bg-white rounded-lg shadow p-4">منتج 1</div>
  <div class="bg-white rounded-lg shadow p-4">منتج 2</div>
  <div class="bg-white rounded-lg shadow p-4">منتج 3</div>
  <div class="bg-white rounded-lg shadow p-4">منتج 4</div>
  <div class="bg-white rounded-lg shadow p-4">منتج 5</div>
</div>

إظهار وإخفاء المحتوى

تحكم في رؤية العنصر على أحجام شاشات مختلفة:

<!-- مخفي على الموبايل، يظهر على سطح المكتب -->
<div class="hidden lg:block">
  محتوى سطح المكتب فقط
</div>

<!-- يظهر على الموبايل، مخفي على سطح المكتب -->
<div class="block lg:hidden">
  محتوى الموبايل فقط
</div>

<!-- يظهر على التابلت فقط -->
<div class="hidden md:block lg:hidden">
  محتوى التابلت فقط
</div>

<!-- مثال تنقل مستجيب -->
<nav class="flex items-center justify-between p-4">
  <div class="text-xl font-bold">الشعار</div>

  <!-- تنقل سطح المكتب -->
  <div class="hidden lg:flex space-x-6">
    <a href="#">الرئيسية</a>
    <a href="#">من نحن</a>
    <a href="#">الخدمات</a>
    <a href="#">اتصل بنا</a>
  </div>

  <!-- قائمة همبرغر للموبايل -->
  <button class="lg:hidden">
    <svg class="size-6"><!-- أيقونة همبرغر --></svg>
  </button>
</nav>

<!-- أدوات الرؤية -->
<div class="invisible md:visible">يأخذ مساحة لكنه غير مرئي على الموبايل</div>

العرض والارتفاع المستجيب

<!-- عرض مستجيب -->
<div class="w-full md:w-3/4 lg:w-1/2 xl:w-1/3">
  حاوية تصبح أضيق على الشاشات الأكبر
</div>

<!-- عرض أقصى مستجيب -->
<div class="max-w-full md:max-w-2xl lg:max-w-4xl xl:max-w-6xl mx-auto">
  حاوية مركزية مع عرض أقصى متزايد
</div>

<!-- ارتفاع مستجيب -->
<div class="h-64 md:h-96 lg:h-screen">
  قسم رئيسي يصبح أطول على الشاشات الأكبر
</div>

<!-- تحجيم الصورة -->
<img
  src="hero.jpg"
  alt="رئيسي"
  class="w-full h-48 md:h-64 lg:h-96 object-cover"
>

تغييرات Flexbox و Grid المستجيبة

<!-- مكدس على الموبايل، flex على التابلت، grid على سطح المكتب -->
<div class="block md:flex lg:grid lg:grid-cols-3 gap-4">
  <div class="mb-4 md:mb-0">عنصر 1</div>
  <div class="mb-4 md:mb-0">عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- اتجاه flex مستجيب وأعمدة grid -->
<div class="flex flex-col md:flex-row lg:grid lg:grid-cols-4 gap-6">
  <div>بطاقة 1</div>
  <div>بطاقة 2</div>
  <div>بطاقة 3</div>
  <div>بطاقة 4</div>
</div>

تكديس نقاط التوقف

فهم كيفية تكديس نقاط التوقف وتجاوزها لبعضها البعض:

<!-- كل نقطة توقف تجاوز السابقة -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  موبايل: text-sm
  تابلت (md): text-base (تجاوز text-sm)
  سطح المكتب (lg): text-lg (تجاوز text-base)
  سطح مكتب كبير (xl): text-xl (تجاوز text-lg)
</div>

<!-- يمكنك تخطي نقاط التوقف -->
<div class="text-sm lg:text-xl">
  صغير على الموبايل والتابلت، كبير جداً على سطح المكتب وما فوق
</div>

<!-- مهم: نقاط التوقف اللاحقة دائماً تفوز -->
<div class="p-4 lg:p-8 md:p-6">
  النتيجة: p-4 على الموبايل، p-6 على التابلت، p-8 على سطح المكتب
  (حتى لو جاء md بعد lg في قائمة الفئات،
   تتعامل خصوصية CSS في Tailwind مع هذا بشكل صحيح)
</div>

الملخص

في هذا الدرس، أتقنت التصميم المستجيب مع Tailwind:

• فلسفة Mobile-first ولماذا تهم
• خمس نقاط توقف افتراضية: sm (640px)، md (768px)، lg (1024px)، xl (1280px)، 2xl (1536px)
• الطباعة والمسافات والتحجيم المستجيب
• تخطيطات مستجيبة مع Flexbox و Grid
• إظهار وإخفاء المحتوى عند نقاط توقف مختلفة
• سلوك تكديس وتجاوز نقاط التوقف
• أنماط صفحة مستجيبة كاملة
• أفضل الممارسات للتصميم المستجيب

مع مهارات التصميم المستجيب هذه، يمكنك الآن إنشاء مواقع ويب تبدو رائعة وتعمل بشكل مثالي على أي جهاز. لقد أكملت الدروس الأساسية حول Tailwind CSS - أنت جاهز لبناء تطبيقات ويب جميلة ومستجيبة وحديثة!