نموذج الصندوق والعرض في Tailwind CSS: التباعد والتحجيم والعرض

Q: ما الوحدة التي يعتمد عليها نظام التباعد في Tailwind؟

يستخدم Tailwind 4 بكسل كوحدة أساسية افتراضية. p-1 = 4 بكسل، p-2 = 8 بكسل، p-4 = 16 بكسل، وهكذا. يمكنك تخصيص مقياس التباعد من خلال الإعدادات.

Q: لماذا يحقق mx-auto التوسيط الأفقي؟

يقوم mx-auto بتعيين هوامش اليسار واليمين إلى تلقائي. عندما يكون للعنصر عرض ثابت، يقوم المتصفح تلقائيًا بحساب هوامش متساوية على كلا الجانبين، مما يحقق التوسيط الأفقي. يجب أن يكون العنصر من المستوى الكتلي.

Q: ما الفرق بين w-full و w-screen ؟

w-full = 100% من عرض العنصر الأب، w-screen = 100vw (عرض نافذة العرض). يُستخدم عرض نافذة العرض عادةً للعناصر التي تحتاج لتمتد عبر الشاشة بأكملها.

نظام تباعد الحشو (Padding)

يتحكم الحشو في المسافة بين محتوى العنصر وحدوده. يوفر Tailwind نظام تباعد كامل من p-0 إلى p-96، وافتراضيًا يكون مضاعفات 4 بكسل.

مثال

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">
    <!-- الحشو الاتجاهي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الحشو الاتجاهي</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded text-center">
          <div class="bg-blue-500 text-white p-2 rounded">p-4</div>
          <span class="text-sm text-gray-600 mt-2 block">جميع الجوانب متساوية</span>
        </div>
        <div class="bg-green-100 px-6 py-4 rounded text-center">
          <div class="bg-green-500 text-white p-2 rounded">px-6 py-4</div>
          <span class="text-sm text-gray-600 mt-2 block">أفقي/عمودي</span>
        </div>
        <div class="bg-purple-100 pt-4 pb-2 px-4 rounded text-center">
          <div class="bg-purple-500 text-white p-2 rounded">pt-4 pb-2</div>
          <span class="text-sm text-gray-600 mt-2 block">علوي/سفلي مختلفان</span>
        </div>
        <div class="bg-orange-100 pl-8 pr-4 py-4 rounded text-center">
          <div class="bg-orange-500 text-white p-2 rounded">pl-8 pr-4</div>
          <span class="text-sm text-gray-600 mt-2 block">يمين/يسار مختلفان</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">
          <div class="bg-gray-200 p-1 w-32 text-center text-sm">p-1 (4px)</div>
          <div class="bg-gray-200 p-2 w-32 text-center text-sm">p-2 (8px)</div>
          <div class="bg-gray-200 p-3 w-32 text-center text-sm">p-3 (12px)</div>
          <div class="bg-gray-200 p-4 w-32 text-center text-sm">p-4 (16px)</div>
        </div>
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-5 w-32 text-center text-sm">p-5 (20px)</div>
          <div class="bg-gray-200 p-6 w-32 text-center text-sm">p-6 (24px)</div>
          <div class="bg-gray-200 p-8 w-32 text-center text-sm">p-8 (32px)</div>
          <div class="bg-gray-200 p-10 w-32 text-center text-sm">p-10 (40px)</div>
        </div>
      </div>
    </div>

    <!-- القيم التعسفية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الحشو بالقيم التعسفية</h3>
      <div class="flex gap-4">
        <div class="bg-blue-100 p-[15px] rounded text-center">p-[15px]</div>
        <div class="bg-green-100 p-[2rem] rounded text-center">p-[2rem]</div>
        <div class="bg-purple-100 p-[5%] rounded text-center">p-[5%]</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات اتجاه الحشو:

الفئة	خاصية CSS	الوصف
`p-4`	`padding: 16px`	جميع الجوانب متساوية
`px-4`	`padding-left/right: 16px`	أفقي
`py-4`	`padding-top/bottom: 16px`	عمودي
`pt-4`	`padding-top: 16px`	علوي
`pr-4`	`padding-right: 16px`	يمين
`pb-4`	`padding-bottom: 16px`	سفلي
`pl-4`	`padding-left: 16px`	يسار

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين قيم padding محددة لكل عنصر، بينما يستخدم Tailwind نظام تباعد مسبق مبني على مضاعفات 4 بكسل للحفاظ على اتساق التصميم.

نظام تباعد الهوامش (Margin)

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

مثال

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">
    <!-- هوامش أساسية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">هوامش أساسية</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 جميع الجوانب متساوية</div>
        <div class="bg-green-500 text-white p-4 mx-8 my-4 rounded">mx-8 my-4</div>
        <div class="bg-purple-500 text-white p-4 mt-8 mb-2 ml-4 mr-6 rounded">
          mt-8 mb-2 ml-4 mr-6
        </div>
      </div>
    </div>

    <!-- التوسيط التلقائي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التوسيط بـ mx-auto</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 w-64 mx-auto rounded text-center">
          mx-auto مُوسَّط
        </div>
      </div>
    </div>

    <!-- هوامش سالبة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الهوامش السالبة</h3>
      <div class="bg-gray-200 p-8">
        <div class="bg-red-500 text-white p-4 -mt-4 -ml-4 rounded">
          -mt-4 -ml-4 هامش سالب
        </div>
      </div>
    </div>

    <!-- مقارنة الهامش والحشو -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">الحشو (تباعد داخلي)</h3>
        <div class="border-2 border-dashed border-blue-300">
          <div class="bg-blue-100 p-6">
            <div class="bg-blue-500 text-white p-4 rounded text-center">
              منطقة المحتوى
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">الهامش (تباعد خارجي)</h3>
        <div class="border-2 border-dashed border-green-300 p-6">
          <div class="bg-green-500 text-white p-4 rounded text-center m-4">
            منطقة المحتوى
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين قيم margin بشكل فردي لكل عنصر، بينما يستخدم Tailwind mx-auto للتوسيط و-mt-4 للهوامش السالبة بن syntax أكثر سهولة.

💡 نصيحة: تستخدم الهوامش السالبة السابقة -، مثل -m-4 و-mt-2، وتُستخدم عادةً للتخطيطات المتداخلة وتعديل مواضع العناصر.

نظام تحجيم العرض/الارتفاع

يوفر Tailwind مجموعة غنية من فئات التحجيم، بما في ذلك الأحجام المسبقة والقيم التعسفية، مع دعم التصميم المتجاوب.

مثال

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">
    <!-- عروض ثابتة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">عروض ثابتة</h3>
      <div class="space-y-2">
        <div class="bg-blue-200 w-16 h-8 rounded">w-16</div>
        <div class="bg-blue-300 w-32 h-8 rounded">w-32</div>
        <div class="bg-blue-400 w-48 h-8 rounded text-white">w-48</div>
        <div class="bg-blue-500 w-64 h-8 rounded text-white">w-64</div>
        <div class="bg-blue-600 w-96 h-8 rounded text-white">w-96</div>
      </div>
    </div>

    <!-- عروض بالنسبة المئوية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">عروض بالنسبة المئوية</h3>
      <div class="space-y-2">
        <div class="bg-green-200 w-1/2 h-8 rounded">w-1/2 (50%)</div>
        <div class="bg-green-300 w-1/3 h-8 rounded">w-1/3 (33.33%)</div>
        <div class="bg-green-400 w-2/3 h-8 rounded text-white">w-2/3 (66.67%)</div>
        <div class="bg-green-500 w-1/4 h-8 rounded text-white">w-1/4 (25%)</div>
        <div class="bg-green-600 w-3/4 h-8 rounded text-white">w-3/4 (75%)</div>
      </div>
    </div>

    <!-- عروض خاصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">عروض خاصة</h3>
      <div class="space-y-2">
        <div class="bg-purple-200 w-full h-8 rounded">w-full (100%)</div>
        <div class="bg-purple-300 w-screen h-8 rounded">w-screen (100vw)</div>
        <div class="bg-purple-400 w-min h-8 rounded text-white">w-min</div>
        <div class="bg-purple-500 w-max h-8 rounded text-white">w-max</div>
        <div class="bg-purple-600 w-fit h-8 rounded text-white">w-fit</div>
      </div>
    </div>

    <!-- عروض دنيا/قصوى -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">العرض الأدنى/الأقصى</h3>
      <div class="space-y-2">
        <div class="bg-orange-200 min-w-[200px] w-32 h-8 rounded">
          min-w-[200px] w-32
        </div>
        <div class="bg-orange-300 max-w-xs h-8 rounded">
          max-w-xs
        </div>
      </div>
    </div>

    <!-- أمثلة الارتفاع -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الارتفاعات</h3>
      <div class="flex gap-4 items-end">
        <div class="bg-blue-500 w-16 h-16 rounded"></div>
        <div class="bg-blue-500 w-16 h-24 rounded"></div>
        <div class="bg-blue-500 w-16 h-32 rounded"></div>
        <div class="bg-blue-500 w-16 h-48 rounded"></div>
        <div class="bg-blue-500 w-16 h-64 rounded"></div>
      </div>
      <div class="mt-4 bg-gray-200 h-screen rounded">
        h-screen (100vh)
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع الأحجام الشائعة:

الفئة	الحجم	بكسل
`w-1`	0.25rem	4px
`w-4`	1rem	16px
`w-8`	2rem	32px
`w-16`	4rem	64px
`w-32`	8rem	128px
`w-64`	16rem	256px
`w-96`	24rem	384px

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين قيم width وheight محددة لكل عنصر، بينما يستخدم Tailwind نظامًا مسبقًا مبنيًا على الوحدة rem يستجيب تلقائيًا لتغييرات حجم الخط.

تحجيم الصندوق (Box Sizing)

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

مثال

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">
    <!-- عرض box-border -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border (الافتراضي)</h3>
      <p class="text-gray-600 mb-4">يتم تضمين الحشو والحد في العرض والارتفاع المحددين</p>
      <div class="bg-gray-200 p-4">
        <div class="box-border w-64 p-8 border-4 border-blue-500 bg-blue-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">العرض الإجمالي = 256px</p>
        </div>
      </div>
    </div>

    <!-- عرض box-content -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-content</h3>
      <p class="text-gray-600 mb-4">يتم إضافة الحشو والحد خارج العرض والارتفاع المحددين</p>
      <div class="bg-gray-200 p-4">
        <div class="box-content w-64 p-8 border-4 border-green-500 bg-green-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">العرض الإجمالي = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- المقارنة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">المقارنة</h3>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-center font-medium mb-2">box-border</p>
          <div class="bg-gray-200 p-4">
            <div class="box-border w-full h-32 p-4 border-4 border-blue-500 bg-blue-200 rounded flex items-center justify-center">
              منطقة محتوى أصغر
            </div>
          </div>
        </div>
        <div>
          <p class="text-center font-medium mb-2">box-content</p>
          <div class="bg-gray-200 p-4">
            <div class="box-content w-full h-32 p-4 border-4 border-green-500 bg-green-200 rounded flex items-center justify-center">
              منطقة محتوى أكبر
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي استخدام الخاصية box-sizing: border-box، بينما يوفر Tailwind اسمين مختصرتين للفئات: box-border وbox-content.

💡 نصيحة: يستخدم Tailwind box-border كقيمة افتراضية (موروثة من إعادة تعيين CSS)، وهي الممارسة الموصى بها لتطوير الويب الحديث.

خاصية العرض (Display)

تتحكم خاصية العرض في كيفية عرض العنصر وهي أساس التخطيط. يوفر Tailwind مجموعة كاملة من فئات utility للعرض.

مثال

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">
    <!-- block و inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block مقابل inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block (يشغل الصف بالكامل)</span>
        <span class="block bg-blue-300 p-2">span - block (يشغل الصف بالكامل)</span>
      </div>
      <div class="bg-gray-200 p-4 mt-4">
        <span class="inline bg-green-200 p-2">span - inline</span>
        <span class="inline bg-green-300 p-2">span - inline</span>
        <span class="inline bg-green-400 p-2">span - inline</span>
      </div>
    </div>

    <!-- inline-block -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">inline-block</h3>
      <div class="bg-gray-200 p-4">
        <span class="inline-block bg-purple-200 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-300 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-400 p-4 m-2 rounded text-white">inline-block</span>
        <p class="text-sm text-gray-600 mt-2">يجمع ميزات كلاً من inline و block</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden (إخفاء العنصر)</h3>
      <div class="bg-gray-200 p-4">
        <p>هذا النص مرئي</p>
        <p class="hidden">هذا النص مخفي (display: none)</p>
        <p>هذا النص مرئي أيضًا</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        نصيحة: استخدم hidden أو البادئات المتجاوبة للتحكم في رؤية العنصر
      </p>
    </div>

    <!-- flex و grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">flex</h3>
        <div class="flex gap-2">
          <div class="bg-blue-200 p-4 rounded flex-1 text-center">1</div>
          <div class="bg-blue-300 p-4 rounded flex-1 text-center">2</div>
          <div class="bg-blue-400 p-4 rounded flex-1 text-center text-white">3</div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">grid</h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-green-200 p-4 rounded text-center">1</div>
          <div class="bg-green-300 p-4 rounded text-center">2</div>
          <div class="bg-green-400 p-4 rounded text-center text-white">3</div>
          <div class="bg-green-500 p-4 rounded text-center text-white">4</div>
          <div class="bg-green-600 p-4 rounded text-center text-white">5</div>
          <div class="bg-green-700 p-4 rounded text-center text-white">6</div>
        </div>
      </div>
    </div>

    <!-- العرض المتجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الإظهار/الإخفاء المتجاوب</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          مرئي فقط على الشاشات الصغيرة (block md:hidden)
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          مرئي فقط على الشاشات المتوسطة (hidden md:block lg:hidden)
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          مرئي فقط على الشاشات الكبيرة (hidden lg:block)
        </p>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

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

الفئة	قيمة CSS	الوصف
`block`	`display: block`	عنصر كتلي
`inline-block`	`display: inline-block`	عنصر سطري كتلي
`inline`	`display: inline`	عنصر سطري
`flex`	`display: flex`	تخطيط مرن
`inline-flex`	`display: inline-flex`	تخطيط مرن سطري
`grid`	`display: grid`	تخطيط شبكي
`inline-grid`	`display: inline-grid`	تخطيط شبكي سطري
`hidden`	`display: none`	إخفاء العنصر

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خاصية display في CSS، بينما يستخدم Tailwind أسماء فئات دلالية مثل block وflex وgrid لشيفرة أكثر قراءة.

⚠️ ملاحظة: يزيل hidden العنصر تمامًا (display: none). استخدم invisible (visibility: hidden) إذا كنت بحاجة للحفاظ على مساحة العنصر.

❓ أسئلة شائعة

س ما الوحدة التي يعتمد عليها نظام التباعد في Tailwind؟

ج يستخدم Tailwind 4 بكسل كوحدة أساسية افتراضية. p-1 = 4 بكسل، p-2 = 8 بكسل، p-4 = 16 بكسل، وهكذا. يمكنك تخصيص مقياس التباعد من خلال الإعدادات.

س لماذا يحقق mx-auto التوسيط الأفقي؟

ج يقوم mx-auto بتعيين هوامش اليسار واليمين إلى تلقائي. عندما يكون للعنصر عرض ثابت، يقوم المتصفح تلقائيًا بحساب هوامش متساوية على كلا الجانبين، مما يحقق التوسيط الأفقي. يجب أن يكون العنصر من المستوى الكتلي.

س ما الفرق بين w-full وw-screen؟

ج w-full = 100% من عرض العنصر الأب، w-screen = 100vw (عرض نافذة العرض). يُستخدم عرض نافذة العرض عادةً للعناصر التي تحتاج لتمتد عبر الشاشة بأكملها.

س متى يجب استخدام box-content؟

ج استخدمه عندما تحتاج أن يكون الحشو والحد معروضين خارج العرض والارتفاع المحددين. في معظم الحالات، ينتج box-border الافتراضي نتائج أكثر توقعًا.

📖 ملخص

يتحكم الحشو في التباعد الداخلي باستخدام البادئات p- وpx- وpy- وpt- وpr- وpb- وpl-
تتحكم الهوامش في التباعد الخارجي؛ mx-auto يُمكّن التوسيط الأفقي
يوفر العرض/الارتفاع قيمًا ثابتة ونسبًا مئوية ووحدات نافذة العرض والمزيد
تحجيم الصندوق افتراضيًا box-border، حيث يتم تضمين الحشو والحد في الأبعاد المحددة
يشمل العرض block وinline وflex وgrid وhidden وخيارات أخرى
بالاقتران مع البادئات المتجاوبة، يمكنك التحكم في رؤية العنصر عبر أحجام شاشات مختلفة

📝 تمارين

⭐ أنشئ مكون بطاقة باستخدام p-6 للحشو وm-4 للهامش وw-80 للعرض وmx-auto للتوسيط الأفقي
⭐⭐ أنشئ تخطيط شبكة متجاوب باستخدام مزيج من display: grid وdisplay: flex، بعمود واحد على الهاتف وعمودين على سطح المكتب
⭐⭐⭐ أنشئ تخطيط صفحة كامل مع شريط جانبي بعرض ثابت (w-64) ومنطقة محتوى رئيسية متكيفة (flex-1)، باستخدام box-border لضمان حسابات الحجم الصحيحة