نظام التخطيط في Tailwind CSS: الحاوية، التموضع والتحكم في الفائض

Q: ما الفرق بين container و max-w-2xl؟

container متجاوب ويضبط حده الأقصى للعرض تلقائيًا عند نقاط التوقف المختلفة. max-w-2xl هو حد أقصى ثابت للعرض 672px. إذا كنت بحاجة إلى عرض ثابت، الأخير أكثر ملاءمة.

الحاوية (Container)

أنشئ فئة الحاوية (Container) غلافًا مركزيًا متجاوبًا يضبط حده الأقصى للعرض تلقائيًا بناءً على نقاط التوقف.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الحاوية</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- حاوية أساسية -->
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4">حاوية أساسية</h2>
      <p class="text-gray-600">تضبط الحاوية حدها الأقصى للعرض تلقائيًا بناءً على عرض الشاشة</p>
    </div>
  </div>

  <!-- خلفية بعرض كامل + محتوى محصور -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">خلفية بعرض كامل + محتوى محصور</h2>
      <p class="text-blue-100">تمتد الخلفية بالعرض الكامل، ويظل المحتوى مركزيًا</p>
    </div>
  </div>

  <!-- عروض الحاوية عند نقاط التوقف المختلفة -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مرجع نقاط توقف الحاوية</h3>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">sm (≥640px)</span>
          <span class="font-mono">max-width: 640px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">md (≥768px)</span>
          <span class="font-mono">max-width: 768px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">lg (≥1024px)</span>
          <span class="font-mono">max-width: 1024px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">xl (≥1280px)</span>
          <span class="font-mono">max-width: 1280px</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">2xl (≥1536px)</span>
          <span class="font-mono">max-width: 1536px</span>
        </div>
      </div>
    </div>
  </div>

  <!-- عرض مخصص للحاوية -->
  <div class="max-w-2xl mx-auto p-4 mt-6">
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-800 mb-2">حد أقصى مخصص للعرض</h3>
      <p class="text-green-600">استخدام max-w-2xl (672px) بدلاً من الحاوية</p>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع نقاط توقف الحاوية:

نقطة التوقف	الحد الأدنى للعرض	الحد الأقصى لعرض الحاوية
الافتراضي	-	100%
`sm`	640px	640px
`md`	768px	768px
`lg`	1024px	1024px
`xl`	1280px	1280px
`2xl`	1536px	1536px

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين max-width والاستعلامات الوسائطية يدويًا للحاويات المتجاوبة، بينما تتعامل فئة container في Tailwind مع جميع نقاط التوقف تلقائيًا.

💡 نصيحة: تحتاج container إلى mx-auto للتوسيط الأفقي. يمكنك تمكين center: true في التكوين لتوسيط الحاويات تلقائيًا.

التموضع (Position)

يوفر Tailwind نظام تموضع كامل: static، relative، absolute، fixed، sticky.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التموضع</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- relative + absolute -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تموضع relative + absolute</h3>
      <div class="relative h-48 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded">
          top-4 left-4
        </div>
        <div class="absolute top-4 right-4 bg-green-500 text-white px-4 py-2 rounded">
          top-4 right-4
        </div>
        <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-4 py-2 rounded">
          bottom-4 left-4
        </div>
        <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-4 py-2 rounded">
          bottom-4 right-4
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="bg-red-500 text-white px-4 py-2 rounded">inset-0 مركزي</span>
        </div>
      </div>
    </div>

    <!-- تموضع sticky -->
    <div class="bg-white rounded-lg shadow">
      <div class="sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg z-10">
        <h3 class="font-semibold">تموضع Sticky - مرر لأسفل لرؤية التأثير</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">مرر لأسفل وسينتقل الرأس إلى الأعلى.</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">منطقة التمرير</span>
        </div>
        <p class="text-gray-600">استمر في التمرير...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">محتوى إضافي</span>
        </div>
      </div>
    </div>

    <!-- مثال تموضع fixed -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تموضع Fixed</h3>
      <p class="text-gray-600 mb-4">
        يتموضع التموضع الثابت (Fixed) نسبةً إلى نافذة العرض، ويُستخدم عادةً لشريط التنقل، أزرار العودة للأعلى، إلخ.
        مثال الكود:
      </p>
      <pre class="bg-gray-100 p-4 rounded text-sm">
&lt;nav class="fixed top-0 left-0 right-0 bg-white shadow"&gt;
  شريط تنقل ثابت
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  العودة للأعلى
&lt;/button&gt;</pre>
    </div>

    <!-- خصائص إزاحة التموضع -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">خصائص إزاحة التموضع</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">top-0</code>
          <span class="text-gray-500 text-sm ml-2">top: 0px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">right-4</code>
          <span class="text-gray-500 text-sm ml-2">right: 16px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">bottom-full</code>
          <span class="text-gray-500 text-sm ml-2">bottom: 100%</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">left-1/2</code>
          <span class="text-gray-500 text-sm ml-2">left: 50%</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات التموضع:

الفئة	قيمة CSS	الوصف
`static`	`position: static`	التموضع الافتراضي، بدون إزاحة
`relative`	`position: relative`	تموضع نسبي، يحافظ على المساحة الأصلية
`absolute`	`position: absolute`	تموضع مطلق، نسبةً إلى أقرب عنصر أب متموضع
`fixed`	`position: fixed`	تموضع ثابت، نسبةً إلى نافذة العرض
`sticky`	`position: sticky`	تموضع لزج، يثبت عند التمرير

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين position وقيم الإزاحة في CSS، بينما يستخدم Tailwind فئات مثل relative، top-4، left-4 للإعلان عنها مباشرة في HTML.

ترتيب تكديس Z-index

يتحكم Z-index في ترتيب تكديس العناصر المتموضعة، ويحدد أي العناصر تظهر في المقدمة.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض ترتيب تكديس Z-index</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- مثال التكديس -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تأثير تكديس Z-index</h3>
      <div class="relative h-64">
        <div class="absolute left-8 top-8 w-48 h-32 bg-red-400 rounded-lg shadow-lg z-10 flex items-center justify-center">
          <span class="text-white font-bold">z-10</span>
        </div>
        <div class="absolute left-16 top-16 w-48 h-32 bg-blue-400 rounded-lg shadow-lg z-20 flex items-center justify-center">
          <span class="text-white font-bold">z-20</span>
        </div>
        <div class="absolute left-24 top-24 w-48 h-32 bg-green-400 rounded-lg shadow-lg z-30 flex items-center justify-center">
          <span class="text-white font-bold">z-30</span>
        </div>
        <div class="absolute left-32 top-32 w-48 h-32 bg-purple-400 rounded-lg shadow-lg z-40 flex items-center justify-center">
          <span class="text-white font-bold">z-40</span>
        </div>
      </div>
    </div>

    <!-- حالات استخدام عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حالات استخدام عملية</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <code class="w-24">z-0</code>
          <span class="text-gray-600">الطبقة الافتراضية</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">البطاقات، مناطق المحتوى</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">القوائم المنسدلة، الأشرطة الجانبية</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">أشرطة التنقل اللزجة</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">تراكبات النافذة المنبثقة</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">النوافذ المنبثقة</span>
        </div>
      </div>
    </div>

    <!-- z-index سالب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index سالب</h3>
      <div class="relative h-32">
        <div class="absolute inset-0 bg-blue-100 rounded flex items-center justify-center">
          <span class="text-blue-600">z-0 طبقة الخلفية</span>
        </div>
        <div class="absolute left-4 top-4 w-32 h-24 bg-red-400 rounded -z-10 flex items-center justify-center">
          <span class="text-white">-z-10</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين قيم z-index محددة في CSS، بينما يوفر Tailwind مستويات مسبقة الإعداد من z-0 إلى z-50 تغطي معظم حالات الاستخدام.

⚠️ ملاحظة: يؤثر z-index فقط على العناصر المتموضعة (relative، absolute، fixed، sticky). استخدم z-auto لإعادة تعيين السلوك الافتراضي.

التحكم في الفائض (Overflow)

يتحكم الفائض في كيفية عرض المحتوى عندما يتجاوز حجم الحاوية.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التحكم في الفائض</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- overflow-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-auto</h3>
      <p class="text-gray-600 mb-4">يظهر أشرطة التمرير عند تجاوز المحتوى</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">هذا محتوى طويل...</p>
        <p class="mb-4">عرض تأثير overflow-auto.</p>
        <p class="mb-4">عندما يتجاوز المحتوى ارتفاع الحاوية، تظهر أشرطة التمرير تلقائيًا.</p>
        <p class="mb-4">يمكن للمستخدمين التمرير لعرض كل المحتوى.</p>
        <p class="mb-4">إضافة المزيد من المحتوى...</p>
        <p class="mb-4">المزيد من النصوص.</p>
        <p>الفقرة الأخيرة من المحتوى.</p>
      </div>
    </div>

    <!-- overflow-hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-hidden</h3>
      <p class="text-gray-600 mb-4">يخفي المحتوى الزائد</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">هذا محتوى طويل...</p>
        <p class="mb-4">عرض تأثير overflow-hidden.</p>
        <p class="mb-4">يُخفي المحتوى الذي يتجاوز الحاوية.</p>
        <p class="mb-4">لا يمكن للمستخدمين التمرير لرؤية المحتوى المخفي.</p>
        <p class="mb-4">هذا المحتوى غير مرئي...</p>
        <p class="mb-4">هذا أيضًا غير مرئي...</p>
        <p>هذا أيضًا غير مرئي...</p>
      </div>
    </div>

    <!-- overflow-scroll -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-scroll</h3>
      <p class="text-gray-600 mb-4">يظهر أشرطة التمرير دائمًا</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">هذا محتوى قصير...</p>
        <p>لكن أشرطة التمرير لا تزال مرئية.</p>
      </div>
    </div>

    <!-- الفائض الأفقي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التحكم في الفائض الأفقي</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto (تمرير أفقي)</p>
          <div class="overflow-x-auto border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-blue-200 p-4 rounded flex-shrink-0 w-48">عنصر 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">عنصر 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">عنصر 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">عنصر 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden (إخفاء الفائض الأفقي)</p>
          <div class="overflow-x-hidden border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-green-200 p-4 rounded flex-shrink-0 w-48">عنصر 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">عنصر 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">عنصر 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">عنصر 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- فائض النص -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">فائض النص</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate (قطع النص في سطر واحد)</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            هذا نص طويل. تُظهر فئة truncate علامة القطع (...) عندما يتجاوز النص في سطر واحد عرض الحاوية، مخفيًا المحتوى الزائد...
          </p>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">text-ellipsis + overflow-hidden</p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap bg-gray-100 p-3 rounded">
            هذه طريقة أخرى لتحقيق علامة القطع، تتطلب الجمع بين text-ellipsis و overflow-hidden و whitespace-nowrap
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات الفائض:

الفئة	قيمة CSS	الوصف
`overflow-auto`	`overflow: auto`	إظهار أشرطة التمرير عند الحاجة
`overflow-hidden`	`overflow: hidden`	إخفاء المحتوى الزائد
`overflow-visible`	`overflow: visible`	إظهار المحتوى الزائد (افتراضي)
`overflow-scroll`	`overflow: scroll`	إظهار أشرطة التمرير دائمًا
`overflow-x-auto`	`overflow-x: auto`	تمرير أفقي تلقائي
`overflow-y-auto`	`overflow-y: auto`	تمرير عمودي تلقائي

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص overflow-x و overflow-y بشكل منفصل للاتجاهات المختلفة، بينما يوفر Tailwind بادئة موحدة overflow-.

Float و Clear

يُستخدم Float لتحريك العناصر، ويتحكم Clear في سلوك التحريك.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض Float</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Float أساسي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Float أساسي</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-32 h-32 bg-blue-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-left</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          يلتف هذا النص حول العنصر المتحرك. يجعل float-left العنصر يتحرك إلى اليسار،
          ويتدفق المحتوى اللاحق حوله. هذا هو تأثير الالتفاف الكلاسيكي حول الصورة.
          إضافة المزيد من النص لإظهار تأثير الالتفاف...
        </p>
      </div>
    </div>

    <!-- Float لليمين -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Float لليمين</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-right w-32 h-32 bg-green-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-right</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          يجعل float-right العنصر يتحرك إلى اليمين. يلتف النص حول العنصر المتحرك من اليسار.
          كان هذا النمط شائعًا في تصميم الويب التقليدي، لكن Flexbox أو Grid مفضلان حاليًا.
          إضافة المزيد من النص لإظهار تأثير الالتفاف...
        </p>
      </div>
    </div>

    <!-- التحكم في Clear -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التحكم في Clear</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-24 h-24 bg-blue-400 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="float-left w-24 h-24 bg-blue-500 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="clear-both bg-yellow-200 p-4 rounded mt-4">
          <p>clear-both: يزيل التحريك من كلا الجانبين، مما يضمن بدء هذا العنصر في سطر جديد</p>
        </div>
      </div>
    </div>

    <!-- clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clearfix (إزالة التحريك)</h3>
      <div class="bg-gray-100 p-4 rounded overflow-hidden">
        <div class="float-left w-32 h-32 bg-purple-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">عنصر متحرك</span>
        </div>
        <div class="float-right w-32 h-32 bg-purple-500 rounded m-4 flex items-center justify-center">
          <span class="text-white">عنصر متحرك</span>
        </div>
        <p class="text-gray-600">
          استخدام overflow-hidden على العنصر الأب لإزالة التحريك
        </p>
      </div>
    </div>

    <!-- البديل الحديث -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">البديل الحديث (موصى به)</h3>
      <p class="text-gray-600 mb-4">
        لاحتياجات التخطيط، يُوصى باستخدام Flexbox أو Grid بدلاً من Float:
      </p>
      <div class="flex gap-4">
        <div class="w-32 h-32 bg-blue-400 rounded flex items-center justify-center">
          <span class="text-white">Flex 1</span>
        </div>
        <div class="w-32 h-32 bg-blue-500 rounded flex items-center justify-center">
          <span class="text-white">Flex 2</span>
        </div>
        <div class="w-32 h-32 bg-blue-600 rounded flex items-center justify-center">
          <span class="text-white">Flex 3</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات Float/Clear:

الفئة	قيمة CSS	الوصف
`float-left`	`float: left`	تحريك لليسار
`float-right`	`float: right`	تحريك لليمين
`float-none`	`float: none`	بدون تحريك
`clear-left`	`clear: left`	إزالة تحريك اليسار
`clear-right`	`clear: right`	إزالة تحريك اليمين
`clear-both`	`clear: both`	إزالة التحريك من كلا الجانبين
`clear-none`	`clear: none`	بدون إزالة

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة فئة .clearfix مع عنصر pseudo ::after، بينما يمكن لـ Tailwind إزالة التحريك مباشرة باستخدام overflow-hidden على العنصر الأب.

⚠️ ملاحظة: تم استبدال تخطيط Float إلى حد كبير بـ Flexbox و Grid. يُستخدم Float حاليًا بشكل أساسي لسيناريوهات محددة مثل الالتفاف حول الصور.

مثال تخطيط شامل

بجمع جميع المفاهيم أعلاه، سنُنشئ تخطيط صفحة كامل.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال تخطيط شامل</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- شريط تنقل ثابت -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">موقعي</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">حول</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">اتصل بنا</a>
      </div>
    </div>
  </nav>

  <!-- منطقة المحتوى الرئيسي -->
  <div class="pt-16">
    <!-- قسم البطل -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">مرحبًا بك في موقعي</h2>
        <p class="text-xl opacity-90">تخطيط حديث مبني بـ Tailwind CSS</p>
      </div>
    </div>

    <!-- بطاقات المحتوى -->
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">عنوان البطاقة</h3>
            <p class="text-gray-600 text-sm">وصف البطاقة...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">عنوان البطاقة</h3>
            <p class="text-gray-600 text-sm">وصف البطاقة...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">عنوان البطاقة</h3>
            <p class="text-gray-600 text-sm">وصف البطاقة...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- تخطيط الشريط الجانبي اللزج -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- المحتوى الرئيسي -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">منطقة المحتوى الرئيسي</h3>
          <div class="space-y-4">
            <p class="text-gray-600">هذه منطقة المحتوى الرئيسي، تشغل معظم المساحة.</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- الشريط الجانبي -->
        <aside class="lg:w-64 lg:sticky lg:top-20 lg:self-start">
          <div class="bg-white rounded-lg shadow p-6">
            <h4 class="font-semibold mb-4">الشريط الجانبي</h4>
            <p class="text-gray-600 text-sm">يستخدم التموضع اللزج للبقاء ثابتًا في الأعلى أثناء التمرير.</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- زر العودة للأعلى -->
  <button class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-40">
    ↑
  </button>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة CSS واسع للتنقل الثابت، الشبكات المتجاوبة، الأشرطة الجانبية اللزجة، وغيرها من التخطيطات، بينما ينجز Tailwind كل شيء بفئات الأدوات المساعدة مباشرة في HTML، مما يقلل الكود بأكثر من 70%.

❓ أسئلة شائعة

س ما الفرق بين container و max-w-2xl؟

ج container متجاوب ويضبط حده الأقصى للعرض تلقائيًا عند نقاط التوقف المختلفة. max-w-2xl هو حد أقصى ثابت للعرض 672px. إذا كنت بحاجة إلى عرض ثابت، الأخير أكثر ملاءمة.

س لماذا لا يعمل التموضع اللزج (sticky)؟

ج يتطلب sticky أن يكون للعنصر الأب ارتفاع محدد وأن يسمح بالتمرير. المشكلة الشائعة هي أن العنصر الأب يحتوي على overflow: hidden، مما يمنع sticky من العمل. تأكد من أن الأب لا يقيد الفائض.

س متى يجب استخدام overflow-hidden لإزالة التحريك (Float)؟

ج استخدمه عندما يحتوي عنصر أب على عناصر أبناء متحركة وتحتاج إلى أن يشمل ارتفاع الأب أبناءه. للتخطيطات الحديثة، يُوصى باستخدام Flexbox أو Grid بدلاً من Float.

س ما هي الاتفاقيات لقيم z-index؟

ج يوفر Tailwind z-0 إلى z-50. مخطط تكديس موصى به: z-10 للمحتوى، z-20 للتنقل، z-30 لشريط التنقل اللزج، z-40 للتراكبات، z-50 للنوافذ المنبثقة. تجنب استخدام قيم كبيرة بشكل مفرط.

📖 ملخص

تُنشئ فئة Container غلافًا مركزيًا متجاوبًا، باستخدام mx-auto للتوسيط الأفقي
يتضمن نظام التموضع خمسة أوضاع: static، relative، absolute، fixed، و sticky
يتراوح Z-index من z-0 إلى z-50، ويتحكم في ترتيب تكديس العناصر المتموضعة
يتحكم الفائض في سلوك تجاوز المحتوى؛ كما يمكن لـ overflow-hidden إزالة التحريك
يُستخدم Float لتخطيطات الالتفاف حول النصوص؛ يُوصى بـ Flexbox أو Grid للتخطيطات الحديثة
تتيح الجمع بين أدوات التخطيط هذه بناء صفحات متجاوبة معقدة

📝 تمارين

⭐ أنشئ صفحة مركزية باستخدام container و mx-auto مع تخطيط شبكة بطاقات بعرض ثابت
⭐⭐ أنشئ صفحة بتخطيط عمودين مع شريط تنقل ثابت (fixed) وشريط جانبي لزج (sticky)
⭐⭐⭐ أنشئ مكون Modal كامل باستخدام التموضع fixed، مستوى تكديس z-50، تراكب خلفية overflow-hidden، مع تكيف متجاوب