English 中文 العربية 日本語 Português

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

1. نظام تباعد الحشو

تحدد الخاصية «Padding» المسافة بين محتوى العنصر وحافته. يوفر Tailwind نظام تباعد كامل بدءًا من p-0 وحتى p-96، مع استخدام مضاعفات 4px كقيمة افتراضية.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding Spacing System 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">
    <!-- Directional padding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Directional Padding</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">All sides equal</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">Horizontal/Vertical</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">Top/Bottom differ</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">Left/Right differ</span>
        </div>
      </div>
    </div>

    <!-- Common padding values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Common Padding Values</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>

    <!-- Arbitrary values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Arbitrary Value Padding</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>
59 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة خاصية 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 نظام تباعد محدد مسبقًا يعتمد على مضاعفات 4px للحفاظ على اتساق التصميم.

2. نظام تباعد الهوامش

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin Spacing System 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 margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Margin</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 all sides equal</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>

    <!-- Auto centering -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">mx-auto Centering</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 centered
        </div>
      </div>
    </div>

    <!-- Negative margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Negative Margin</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 negative margin
        </div>
      </div>
    </div>

    <!-- margin vs padding comparison -->
    <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">Padding (Inner Spacing)</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">
              Content area
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Margin (Outer Spacing)</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">
            Content area
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
59 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

3. نظام تحديد المقاسات حسب العرض/الارتفاع

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width/Height Sizing System 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">
    <!-- Fixed widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Fixed Widths</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>

    <!-- Percentage widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Percentage Widths</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>

    <!-- Special widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Special Widths</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>

    <!-- Min/Max widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Min/Max Widths</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>

    <!-- Height examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Heights</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>
67 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع عام للمقاسات:

الفئة الحجم عدد البكسلات
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» يستجيب تلقائيًا لتغيرات حجم الخط.

4. تحديد حجم المربع

تحدد خاصية «Box Sizing» كيفية حساب أبعاد العنصر، مما يؤثر على ما إذا كان الحشو والحدود مشمولين في العرض والارتفاع المحددين.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Sizing 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">
    <!-- box-border demo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border (Default)</h3>
      <p class="text-gray-600 mb-4">Padding and border are included in the set width and height</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">Total width = 256px</p>
        </div>
      </div>
    </div>

    <!-- box-content demo -->
    <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">Padding and border are added outside the set width and height</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">Total width = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- Comparison -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Comparison</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">
              Smaller content area
            </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">
              Larger content area
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
54 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

5. خاصية العرض

تتحكم خاصية «Display» في كيفية عرض العنصر، وهي تشكل أساس التخطيط. يوفر Tailwind مجموعة كاملة من فئات المساعدة الخاصة بعرض العناصر.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Property 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">
    <!-- block and inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block vs inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block (occupies full row)</span>
        <span class="block bg-blue-300 p-2">span - block (occupies full row)</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">Combines features of both inline and block</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden (Hide Element)</h3>
      <div class="bg-gray-200 p-4">
        <p>This text is visible</p>
        <p class="hidden">This text is hidden (display: none)</p>
        <p>This text is also visible</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        Tip: Use hidden or responsive prefixes to control element visibility
      </p>
    </div>

    <!-- flex and 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>

    <!-- Responsive display -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Show/Hide</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          Only visible on small screens (block md:hidden)
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          Only visible on medium screens (hidden md:block lg:hidden)
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          Only visible on large screens (hidden lg:block)
        </p>
      </div>
    </div>
  </div>
</body>
</html>
80 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة قيمة CSS الوصف
block display: block عنصر كتلة
inline-block display: inline-block عنصر Inline-block
inline display: inline عنصر مضمن
flex display: flex تخطيط Flex
inline-flex display: inline-flex تخطيط 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 4px كوحدة أساسية بشكل افتراضي. p-1 = 4px، p-2 = 8px، p-4 = 16px، وهكذا دواليك. يمكنك تخصيص مقياس التباعد من خلال الإعدادات.
س لماذا يحقق mx-auto التوسيط الأفقي؟
ج يقوم mx-auto بتعيين الهامشين الأيمن والأيسر على «تلقائي». وعندما يكون للعنصر عرض ثابت، يقوم المتصفح تلقائيًا بحساب هامشين متساويين على كلا الجانبين، مما يحقق التوسيط الأفقي. ويجب أن يكون العنصر من مستوى الكتلة.
س ما الفرق بين w-full وw-screen؟
ج w-full = 100% من عرض العنصر الأصلي، وw-screen = 100vw (عرض نافذة العرض). وعادةً ما يُستخدم عرض نافذة العرض للعناصر التي تحتاج إلى أن تمتد على كامل الشاشة.
س متى يجب عليّ استخدام box-content؟
ج استخدمه عندما تحتاج إلى عرض الحواف الداخلية والخارجية خارج العرض والارتفاع المحددين. في معظم الحالات، يُعطي الإعداد الافتراضي box-border نتائج يمكن التنبؤ بها بشكل أكبر.

📖 ملخص

📝 تمارين

  1. ⭐ قم بإنشاء مكون بطاقة باستخدام p-6 للتباعد الداخلي، وm-4 للهامش، وw-80 للعرض، وmx-auto للتوسيط الأفقي

  2. ⭐⭐ إنشاء تخطيط شبكي متجاوب باستخدام مزيج من display: grid وdisplay: flex، بحيث يكون التخطيط مكونًا من عمود واحد على الأجهزة المحمولة وعمودين على أجهزة الكمبيوتر المكتبية

  3. ⭐⭐⭐ قم بإنشاء تخطيط صفحة كامل يتضمن شريطًا جانبيًّا بعرض ثابت (w-64) ومنطقة محتوى رئيسية قابلة للتكيف (flex-1)، مع استخدام box-border لضمان حسابات الحجم الصحيحة

Web-Tutorial.com

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

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

100%