Tailwind CSS: نظام تخطيط Tailwind CSS

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

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

1. الحاوية

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Basic container -->
  <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">Basic Container</h2>
      <p class="text-gray-600">The container automatically adjusts its max-width based on screen width</p>
    </div>
  </div>

  <!-- Full-width background + contained content -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">Full-Width Background + Contained Content</h2>
      <p class="text-blue-100">Background stretches full width, content stays centered</p>
    </div>
  </div>

  <!-- Container widths at different breakpoints -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Container Breakpoint Reference</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>

  <!-- Custom container width -->
  <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">Custom Max Width</h3>
      <p class="text-green-600">Using max-w-2xl (672px) instead of container</p>
    </div>
  </div>
</body>
</html>

56 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

نقطة توقف	الحد الأدنى للعرض	الحد الأقصى لعرض الحاوية
الافتراضي	-	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 في ملف التكوين الخاص بك لتوسيط الحاويات تلقائيًا.

2. المنصب

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Demo</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 Positioning</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 centered</span>
        </div>
      </div>
    </div>

    <!-- sticky positioning -->
    <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 Positioning - Scroll down to see the effect</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">Scroll down and the header will stick to the top.</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">Scroll area</span>
        </div>
        <p class="text-gray-600">Keep scrolling...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">More content</span>
        </div>
      </div>
    </div>

    <!-- fixed positioning example -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Fixed Positioning</h3>
      <p class="text-gray-600 mb-4">
        Fixed positioning is relative to the viewport, commonly used for navbars, back-to-top buttons, etc.
        Example code:
      </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;
  Fixed navbar
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  Back to top
&lt;/button&gt;</pre>
    </div>

    <!-- Position offset properties -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Position Offset Properties</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>

83 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة الوظيفة:

الفئة	قيمة 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.

3. ترتيب التراكب باستخدام Z-index

يتحكم مؤشر Z في ترتيب تراص العناصر الموضعة، حيث يحدد العناصر التي تظهر في المقدمة.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-index Stacking Order Demo</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">
    <!-- Stacking example -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index Stacking Effect</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>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Use Cases</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">Default layer</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">Cards, content areas</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">Dropdowns, sidebars</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">Sticky navbars</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">Modal overlays</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">Modals, popups</span>
        </div>
      </div>
    </div>

    <!-- Negative z-index -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Negative 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 background layer</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>

70 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

4. التحكم في الفائض

تحدد خاصية «overflow» كيفية عرض المحتوى عندما يتجاوز حجم الحاوية.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Control Demo</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">Shows scrollbars when content overflows</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This is a long piece of content...</p>
        <p class="mb-4">Demonstrating the overflow-auto effect.</p>
        <p class="mb-4">When content exceeds the container height, scrollbars appear automatically.</p>
        <p class="mb-4">Users can scroll to view all content.</p>
        <p class="mb-4">Adding more content...</p>
        <p class="mb-4">Even more text content.</p>
        <p>Last paragraph of content.</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">Hides overflowing content</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This is a long piece of content...</p>
        <p class="mb-4">Demonstrating the overflow-hidden effect.</p>
        <p class="mb-4">Content that exceeds the container is hidden.</p>
        <p class="mb-4">Users cannot scroll to see the hidden content.</p>
        <p class="mb-4">This content is invisible...</p>
        <p class="mb-4">This is also invisible...</p>
        <p>This is also invisible...</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">Always shows scrollbars</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">This content is short...</p>
        <p>But scrollbars are still visible.</p>
      </div>
    </div>

    <!-- Horizontal overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Horizontal Overflow Control</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto (horizontal scroll)</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">Item 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden (hide horizontal overflow)</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">Item 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- text-overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Text Overflow</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate (single-line ellipsis)</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            This is a long text content. The truncate class shows an ellipsis when single-line text overflows, hiding content beyond the container width with ...
          </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">
            This is another way to achieve ellipsis, requiring the combination of text-ellipsis, overflow-hidden, and whitespace-nowrap
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

91 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة التجاوز:

الفئة	قيمة 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-.

5. تعويم ومسح

يُستخدم «Float» لتنسيق العناصر العائمة، بينما يتحكم «Clear» في سلوك العناصر العائمة.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float Demo</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">
    <!-- Basic float -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic 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">
          This text wraps around the floating element. float-left makes the element float to the left,
          and subsequent content flows around it. This is the classic text-wrapping-around-image effect.
          Adding more text to demonstrate the wrapping effect...
        </p>
      </div>
    </div>

    <!-- Right float -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Right 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 makes the element float to the right. Text wraps around the floating element from the left.
          This layout pattern was common in traditional web design, but Flexbox or Grid are now preferred.
          Adding more text to demonstrate the wrapping effect...
        </p>
      </div>
    </div>

    <!-- Clear control -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clear Control</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: clears floats on both sides, ensuring this starts on a new line</p>
        </div>
      </div>
    </div>

    <!-- clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clearfix (Clearing Floats)</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">Floating element</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">Floating element</span>
        </div>
        <p class="text-gray-600">
          Using overflow-hidden on the parent element to clear floats
        </p>
      </div>
    </div>

    <!-- Modern alternative -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Modern Alternative (Recommended)</h3>
      <p class="text-gray-600 mb-4">
        For layout needs, Flexbox or Grid is recommended over 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>

84 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة 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 مع عنصر زائف ::after، بينما يمكن لـ Tailwind مسح العناصر العائمة مباشرةً باستخدام overflow-hidden على العنصر الأصلي.

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

6. مثال على تخطيط شامل

بالجمع بين جميع المفاهيم المذكورة أعلاه، دعونا نصمم تخطيطًا كاملاً للصفحة.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comprehensive Layout Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Fixed navbar -->
  <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">My Website</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Main content area -->
  <div class="pt-16">
    <!-- Hero section -->
    <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">Welcome to My Website</h2>
        <p class="text-xl opacity-90">A modern layout built with Tailwind CSS</p>
      </div>
    </div>

    <!-- Content cards -->
    <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">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</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">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</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">Card Title</h3>
            <p class="text-gray-600 text-sm">Card description...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky sidebar layout -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Main content -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">Main Content Area</h3>
          <div class="space-y-4">
            <p class="text-gray-600">This is the main content area, taking up most of the space.</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- Sidebar -->
        <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">Sidebar</h4>
            <p class="text-gray-600 text-sm">Uses sticky positioning to stay fixed at the top while scrolling.</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- Back to top button -->
  <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>

74 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

❓ أسئلة شائعة

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

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

س لماذا لا يعمل وضع العنصر «sticky»؟

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

س متى يجب استخدام خاصية overflow-hidden لإزالة العناصر العائمة؟

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

س ما هي القواعد المتبعة لقيم z-index؟

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

📖 ملخص

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

📝 تمارين

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

فريق Web-Tutorial التقني

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

من نحن