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

Tailwind CSS: الخلفيات والحدود في Tailwind CSS

1. لون الخلفية (bg-*)

تُستخدم فئات bg-* لتعيين لون خلفية عنصر ما، وهي تدعم مجموعة متنوعة من الألوان المحددة مسبقًا ومستويات التعتيم.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Color 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 colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Background Colors</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 text-white p-4 rounded text-center">red-500</div>
        <div class="bg-blue-500 text-white p-4 rounded text-center">blue-500</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">green-500</div>
        <div class="bg-yellow-500 text-white p-4 rounded text-center">yellow-500</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">purple-500</div>
        <div class="bg-pink-500 text-white p-4 rounded text-center">pink-500</div>
        <div class="bg-indigo-500 text-white p-4 rounded text-center">indigo-500</div>
        <div class="bg-gray-500 text-white p-4 rounded text-center">gray-500</div>
      </div>
    </div>

    <!-- Color shades -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Color Shades (50-950)</h3>
      <div class="space-y-2">
        <div class="bg-blue-50 text-blue-900 p-3 rounded">blue-50</div>
        <div class="bg-blue-100 text-blue-900 p-3 rounded">blue-100</div>
        <div class="bg-blue-200 text-blue-900 p-3 rounded">blue-200</div>
        <div class="bg-blue-300 text-blue-900 p-3 rounded">blue-300</div>
        <div class="bg-blue-400 text-white p-3 rounded">blue-400</div>
        <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
        <div class="bg-blue-600 text-white p-3 rounded">blue-600</div>
        <div class="bg-blue-700 text-white p-3 rounded">blue-700</div>
        <div class="bg-blue-800 text-white p-3 rounded">blue-800</div>
        <div class="bg-blue-900 text-white p-3 rounded">blue-900</div>
        <div class="bg-blue-950 text-white p-3 rounded">blue-950</div>
      </div>
    </div>

    <!-- Opacity -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Opacity</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-blue-500/100 text-blue-900 p-4 rounded text-center">/100</div>
        <div class="bg-blue-500/75 text-blue-900 p-4 rounded text-center">/75</div>
        <div class="bg-blue-500/50 text-blue-900 p-4 rounded text-center">/50</div>
        <div class="bg-blue-500/25 text-blue-900 p-4 rounded text-center">/25</div>
      </div>
    </div>
  </div>
</body>
</html>
51 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئات ألوان الخلفية:

الفئة قيمة CSS الوصف
bg-red-500 background-color: #ef4444 خلفية حمراء
bg-blue-500 background-color: #3b82f6 خلفية زرقاء
bg-transparent background-color: transparent خلفية شفافة
bg-current background-color: currentColor لون النص الحالي
bg-white background-color: #fff خلفية بيضاء
bg-black background-color: #000 خلفية سوداء
bg-blue-500/50 background-color: rgb(59 130 246 / 0.5) أزرق بنسبة شفافية 50%

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين background-color في CSS وحفظ القيم السداسية العشرية، في حين يستخدم Tailwind أسماء فئات دلالية مثل bg-blue-500 للتعريف المباشر. وتدعم صيغة /50 التحكم في التعتيم.

💡 نصيحة: تتراوح درجات الألوان من 50 (الأفتح) إلى 950 (الأغمق)، حيث تُعد الدرجة 500 هي الدرجة القياسية. استخدم صيغة /opacity لضبط الشفافية بسرعة.

2. خلفيات متدرجة (bg-gradient-*)

تستخدم الخلفيات المتدرجة bg-gradient-to-* لتعيين الاتجاه، إلى جانب from-* وvia-* وto-* لتعيين الألوان.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Background 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">
    <!-- Linear gradient directions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Linear Gradient Directions</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r (rightward)</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l (leftward)</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b (downward)</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t (upward)</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br (bottom-right)</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl (bottom-left)</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr (top-right)</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl (top-left)</div>
      </div>
    </div>

    <!-- Three-color gradients -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Three-Color Gradients (from-via-to)</h3>
      <div class="space-y-4">
        <div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 text-white p-6 rounded text-center">Blue → Green → Purple</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">Red → Yellow → Green</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">Pink → Purple → Indigo</div>
      </div>
    </div>

    <!-- Practical examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Examples</h3>
      <div class="space-y-4">
        <!-- Gradient button -->
        <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Gradient Button
        </button>
        <!-- Gradient card -->
        <div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white p-6 rounded-lg">
          <h4 class="text-xl font-bold mb-2">Gradient Card</h4>
          <p class="opacity-90">Use gradient backgrounds to create visual appeal</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
46 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة Gradient:

الفئة قيمة CSS الوصف
bg-gradient-to-r background-image: linear-gradient(to right, ...) التدرج نحو اليمين
bg-gradient-to-l background-image: linear-gradient(to left, ...) التدرج نحو اليسار
bg-gradient-to-b background-image: linear-gradient(to bottom, ...) التدرج الهابط
bg-gradient-to-t background-image: linear-gradient(to top, ...) التدرج التصاعدي
from-blue-500 --tw-gradient-from: #3b82f6 لون البداية
via-green-500 --tw-gradient-via: #22c55e اللون المتوسط
to-purple-500 --tw-gradient-to: #a855f7 لون النهاية

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة background-image: linear-gradient(to right, #3b82f6, #a855f7) في CSS، في حين يستخدم Tailwind أسماء الفئات bg-gradient-to-r from-blue-500 to-purple-500 للتعريف المباشر.

💡 نصيحة: via-* هو لون وسيط اختياري. وفي حالة عدم وجود via-*، ينتقل التدرج اللوني مباشرةً من from-* إلى to-*.

3. صور الخلفية (bg-*)

تستخدم فئات الصور الخلفية bg-* لتعيين مسار الصورة وحجمها وموضعها.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Image 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">
    <!-- Background image sizing -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Image Sizing</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="h-48 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-cover</div>
        </div>
        <div class="h-48 bg-contain bg-center bg-no-repeat rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-contain</div>
        </div>
      </div>
    </div>

    <!-- Background image position -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Image Position</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="h-32 bg-cover bg-top rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-top</div>
        </div>
        <div class="h-32 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-center</div>
        </div>
        <div class="h-32 bg-cover bg-bottom rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-bottom</div>
        </div>
      </div>
    </div>

    <!-- Hero section -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Hero Section Example</h3>
      <div class="h-64 bg-cover bg-center rounded-lg relative" style="background-image: url('https://picsum.photos/800/400')">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/80 to-purple-600/80 rounded-lg"></div>
        <div class="relative h-full flex flex-col items-center justify-center text-white">
          <h2 class="text-3xl font-bold mb-4">Welcome to Our Website</h2>
          <p class="text-lg opacity-90">Create beautiful background effects with Tailwind CSS</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
48 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة قيمة CSS الوصف
bg-cover background-size: cover غطِّ الحاوية
bg-contain background-size: contain يتناسب مع الحاوية
bg-auto background-size: auto الحجم الأصلي
bg-center background-position: center في الوسط
bg-top background-position: top محاذاة إلى الأعلى
bg-bottom background-position: bottom محاذاة إلى الأسفل
bg-no-repeat background-repeat: no-repeat بدون تكرار
bg-repeat background-repeat: repeat تكرار (الافتراضي)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص متعددة مثل background-size وbackground-position وbackground-repeat في CSS، في حين يستخدم Tailwind أسماء الفئات مثل bg-cover وbg-center وbg-no-repeat للتعريف المباشر.

💡 نصيحة: استخدم bg-gradient-to-r from-blue-600/80 to-purple-600/80 لوضع قناع متدرج اللون فوق صور الخلفية، مما يحسّن قابلية قراءة النص.

4. نصف قطر الحدود (rounded-*)

تُستخدم فئات rounded-* لتعيين نصف قطر حدود العنصر.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Radius 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 border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Border Radius</h3>
      <div class="flex flex-wrap gap-4 items-end">
        <div class="w-24 h-24 bg-blue-500 rounded-none flex items-center justify-center text-white text-xs">rounded-none</div>
        <div class="w-24 h-24 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs">rounded-sm</div>
        <div class="w-24 h-24 bg-blue-500 rounded flex items-center justify-center text-white text-xs">rounded</div>
        <div class="w-24 h-24 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs">rounded-md</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs">rounded-lg</div>
        <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center text-white text-xs">rounded-xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-xs">rounded-2xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>

    <!-- Side-specific border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Side-Specific Border Radius</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-500 rounded-t-lg flex items-center justify-center text-white text-sm">rounded-t-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-r-lg flex items-center justify-center text-white text-sm">rounded-r-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-b-lg flex items-center justify-center text-white text-sm">rounded-b-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-l-lg flex items-center justify-center text-white text-sm">rounded-l-lg</div>
      </div>
    </div>

    <!-- Corner-specific border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Corner-Specific Border Radius</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-500 rounded-tl-lg flex items-center justify-center text-white text-sm">rounded-tl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-tr-lg flex items-center justify-center text-white text-sm">rounded-tr-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-bl-lg flex items-center justify-center text-white text-sm">rounded-bl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-br-lg flex items-center justify-center text-white text-sm">rounded-br-lg</div>
      </div>
    </div>

    <!-- Practical examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Examples</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">Avatar</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">Rounded Button</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">Tag</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
53 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة «نصف قطر الحافة»:

الفئة قيمة CSS الوصف
rounded-none border-radius: 0 بدون تقريب
rounded-sm border-radius: 0.125rem نصف قطر صغير
rounded border-radius: 0.25rem نصف القطر الافتراضي
rounded-md border-radius: 0.375rem نصف قطر متوسط
rounded-lg border-radius: 0.5rem نصف قطر كبير
rounded-xl border-radius: 0.75rem نصف قطر كبير جدًا
rounded-2xl border-radius: 1rem نصف قطر كبير جدًا × 2
rounded-full border-radius: 9999px مستديرة تمامًا (دائرة)
rounded-t-lg نصف قطر الجزء العلوي 0.5rem الجانب العلوي فقط
rounded-r-lg نصف القطر الأيمن 0.5rem الجانب الأيمن فقط
rounded-b-lg نصف قطر الحافة السفلية 0.5rem الجانب السفلي فقط
rounded-l-lg نصف قطر اليسار 0.5rem الجانب الأيسر فقط
rounded-tl-lg نصف قطر الزاوية العلوية اليسرى 0.5rem الزاوية العلوية اليسرى فقط
rounded-tr-lg نصف قطر الزاوية العلوية اليمنى 0.5rem الزاوية العلوية اليمنى فقط
rounded-bl-lg نصف قطر الزاوية السفلية اليسرى 0.5rem الزاوية السفلية اليسرى فقط
rounded-br-lg نصف قطر الزاوية اليمنى السفلية 0.5rem الزاوية اليمنى السفلية فقط

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين الخاصية border-radius في CSS، في حين يستخدم Tailwind أسماء الفئات مثل rounded-lg وrounded-full للتعريف المباشر. أما التقريب الخاص بالجوانب والزوايا فيستخدم rounded-t-lg وrounded-tl-lg، وما إلى ذلك.

💡 نصيحة: تُستخدم rounded-full لإنشاء صور رمزية دائرية وأزرار مستديرة وما إلى ذلك. وعند استخدامها مع عرض وارتفاع متساويين، فإنها تنتج دوائر مثالية.

5. الحدود (border-*)

تُستخدم فئات border-* لتعيين عرض الحدود ولونها ونمطها لعنصر ما.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border 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">
    <!-- Border width -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Width</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-0 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-0</div>
        <div class="w-24 h-24 border border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border</div>
        <div class="w-24 h-24 border-2 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-2</div>
        <div class="w-24 h-24 border-4 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-4</div>
        <div class="w-24 h-24 border-8 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-8</div>
      </div>
    </div>

    <!-- Border color -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Color</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-2 border-red-500 flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">purple</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">gray</div>
      </div>
    </div>

    <!-- Side-specific borders -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Side-Specific Borders</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-t-4 border-blue-500 flex items-center justify-center text-sm">border-t-4</div>
        <div class="w-32 h-24 border-r-4 border-green-500 flex items-center justify-center text-sm">border-r-4</div>
        <div class="w-32 h-24 border-b-4 border-purple-500 flex items-center justify-center text-sm">border-b-4</div>
        <div class="w-32 h-24 border-l-4 border-orange-500 flex items-center justify-center text-sm">border-l-4</div>
      </div>
    </div>

    <!-- Border style -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Style</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-2 border-solid border-blue-500 flex items-center justify-center text-sm">border-solid</div>
        <div class="w-32 h-24 border-2 border-dashed border-blue-500 flex items-center justify-center text-sm">border-dashed</div>
        <div class="w-32 h-24 border-2 border-dotted border-blue-500 flex items-center justify-center text-sm">border-dotted</div>
        <div class="w-32 h-24 border-2 border-double border-blue-500 flex items-center justify-center text-sm">border-double</div>
      </div>
    </div>
  </div>
</body>
</html>
51 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة الحدود:

الفئة قيمة CSS الوصف
border-0 border-width: 0 بدون حدود
border border-width: 1px حدود 1 بكسل
border-2 border-width: 2px حدود 2 بكسل
border-4 border-width: 4px حدود 4 بكسل
border-8 border-width: 8px حدود 8px
border-blue-500 border-color: #3b82f6 إطار أزرق
border-t-4 border-top-width: 4px الحد العلوي 4px
border-solid border-style: solid حدود صلبة
border-dashed border-style: dashed حدود متقطعة
border-dotted border-style: dotted حدود منقطة

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص متعددة مثل border-width وborder-color وborder-style في CSS، في حين يستخدم Tailwind أسماء الفئات مثل border-2 وborder-blue-500 وborder-dashed للتعريف المباشر.

6. الفواصل (divide-*)

تُضيف فئات divide-* فواصل بين العناصر التابعة دون الحاجة إلى تعيين حدود لكل عنصر تابع على حدة.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Divider 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">
    <!-- Vertical dividers -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Vertical Dividers (Horizontal Layout)</h3>
      <div class="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">Item 1</div>
        <div class="flex-1 p-4 text-center">Item 2</div>
        <div class="flex-1 p-4 text-center">Item 3</div>
        <div class="flex-1 p-4 text-center">Item 4</div>
      </div>
    </div>

    <!-- Horizontal dividers -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Horizontal Dividers (Vertical Layout)</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">Item 1</div>
        <div class="p-4">Item 2</div>
        <div class="p-4">Item 3</div>
        <div class="p-4">Item 4</div>
      </div>
    </div>

    <!-- Different colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dividers in Different Colors</h3>
      <div class="space-y-4">
        <div class="divide-y divide-blue-300">
          <div class="p-3">Blue divider</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">Green divider</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">Purple divider</div>
          <div class="p-3">Item 2</div>
        </div>
      </div>
    </div>

    <!-- Practical example: list -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: List</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">John Doe</div>
            <div class="text-sm text-gray-500">john@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Jane Smith</div>
            <div class="text-sm text-gray-500">jane@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Bob Johnson</div>
            <div class="text-sm text-gray-500">bob@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
74 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين border-bottom على كل عنصر تابع ومعالجة حدود العنصر الأخير بشكل منفصل. أما divide-* في Tailwind، فيضيف فواصلًا تلقائيًّا بين العناصر التابعة دون الحاجة إلى أي معالجة إضافية.

💡 نصيحة: تضيف divide-y فواصل أفقية بين العناصر الفرعية، بينما تضيف divide-x فواصل رأسية. لاحظ أن الاتجاه معاكس لاتجاه التمرير المرن.

7. مخططات الحلقات (ring-*)

تضيف فئات ring-* إطارًا دائريًّا حول العنصر. وهي مشابهة لـ outline، لكنها تُنفَّذ باستخدام box-shadow، لذا فهي لا تؤثر على التخطيط.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ring Outline 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 rings -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Ring Outlines</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-1 ring-blue-500 rounded flex items-center justify-center text-xs">ring-1</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">ring-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-4 ring-blue-500 rounded flex items-center justify-center text-xs">ring-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-8 ring-blue-500 rounded flex items-center justify-center text-xs">ring-8</div>
      </div>
    </div>

    <!-- Ring colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Ring Colors</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-red-50 ring-2 ring-red-500 rounded flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">purple</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset (Offset Ring)</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-2 rounded flex items-center justify-center text-xs">offset-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-4 rounded flex items-center justify-center text-xs">offset-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-8 rounded flex items-center justify-center text-xs">offset-8</div>
      </div>
    </div>

    <!-- Practical example: focus states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: Focus States</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Click to see focus effect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg ring-2 ring-blue-600 ring-offset-2 hover:bg-blue-700">
          Ring Button
        </button>
      </div>
    </div>
  </div>
</body>
</html>
48 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة مخطط الحلقة:

الفئة قيمة CSS الوصف
ring-0 box-shadow: 0 0 0 0px ... بدون حلقة
ring-1 box-shadow: 0 0 0 1px ... حلقة 1px
ring-2 box-shadow: 0 0 0 2px ... حلقة 2px
ring-4 box-shadow: 0 0 0 4px ... حلقة 4px
ring-8 box-shadow: 0 0 0 8px ... حلقة 8px
ring-blue-500 --tw-ring-color: #3b82f6 حلقة زرقاء
ring-offset-2 box-shadow: 0 0 0 2px white, 0 0 0 4px ... إزاحة 2 بكسل
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... إزاحة 4 بكسل

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين box-shadow أو outline في CSS، في حين يستخدم Tailwind أسماء فئات مثل ring-2 وring-blue-500 وring-offset-2 للتعريف المباشر. ويتم تنفيذ ring-* باستخدام box-shadow، لذا فإنه لا يؤثر على التخطيط.

💡 نصيحة: يُستخدم ring-* عادةً لحالات التركيز (focus:ring-2) وحالات التحديد. أما ring-offset-* فيخلق فجوة بين الحلقة والعنصر.

8. المخطط التفصيلي

تحدد فئات outline-* محيط العنصر. وهي مشابهة لـ ring-*، لكنها تستخدم الخاصية الأصلية outline.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline 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 outline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Outline</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-blue-100 outline outline-1 outline-blue-500 rounded flex items-center justify-center text-sm">outline-1</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-2 outline-blue-500 rounded flex items-center justify-center text-sm">outline-2</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-4 outline-blue-500 rounded flex items-center justify-center text-sm">outline-4</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-8 outline-blue-500 rounded flex items-center justify-center text-sm">outline-8</div>
      </div>
    </div>

    <!-- outline-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">outline-offset</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-0 rounded flex items-center justify-center text-sm">offset-0</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-2 rounded flex items-center justify-center text-sm">offset-2</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-4 rounded flex items-center justify-center text-sm">offset-4</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-8 rounded flex items-center justify-center text-sm">offset-8</div>
      </div>
    </div>

    <!-- outline styles -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Outline Styles</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dashed outline-purple-500 rounded flex items-center justify-center text-sm">dashed</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dotted outline-purple-500 rounded flex items-center justify-center text-sm">dotted</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-double outline-purple-500 rounded flex items-center justify-center text-sm">double</div>
      </div>
    </div>

    <!-- Practical example: focus states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: Focus States</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Click to see focus effect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg outline outline-2 outline-offset-2 outline-blue-600 hover:bg-blue-700">
          Outline Button
        </button>
      </div>
    </div>
  </div>
</body>
</html>
48 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص متعددة مثل outline-width وoutline-color وoutline-style وoutline-offset في CSS، في حين يستخدم Tailwind أسماء الفئات مثل outline-2 وoutline-blue-500 وoutline-offset-2 للتعريف المباشر.

⚠️ ملاحظة: لا يؤثر outline على التخطيط (لا يشغل أي مساحة) ويُستخدم عادةً لحالات التركيز. يستخدم ring box-shadow ولا يؤثر هو الآخر على التخطيط. ويمكن استخدام الاثنين معًا.

9. مثال شامل

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background & Border Comprehensive Example</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">
    <!-- Gradient card -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
      <h2 class="text-3xl font-bold mb-4">Gradient Card</h2>
      <p class="opacity-90 mb-6">Use gradient backgrounds, border radius, and shadows to create beautiful cards</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        Get Started
      </button>
    </div>

    <!-- Bordered form -->
    <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
      <h3 class="text-xl font-semibold mb-6 pb-4 border-b border-gray-200">Login Form</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Sign In
        </button>
      </div>
    </div>

    <!-- Feature list -->
    <div class="bg-white rounded-xl shadow-lg divide-y divide-gray-200">
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-blue-100 rounded-full ring-2 ring-blue-500 flex items-center justify-center">
          <span class="text-blue-600 text-xl">1</span>
        </div>
        <div>
          <h4 class="font-semibold">Gradient Backgrounds</h4>
          <p class="text-sm text-gray-600">Support multi-direction, multi-color gradients</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-green-100 rounded-full ring-2 ring-green-500 flex items-center justify-center">
          <span class="text-green-600 text-xl">2</span>
        </div>
        <div>
          <h4 class="font-semibold">Rounded Borders</h4>
          <p class="text-sm text-gray-600">Flexible border radius and border control</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-purple-100 rounded-full ring-2 ring-purple-500 flex items-center justify-center">
          <span class="text-purple-600 text-xl">3</span>
        </div>
        <div>
          <h4 class="font-semibold">Ring Outlines</h4>
          <p class="text-sm text-gray-600">Focus states and selection effects</p>
        </div>
      </div>
    </div>

    <!-- Image grid -->
    <div class="grid grid-cols-3 gap-4">
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=1')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=2')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=3')"></div>
    </div>
  </div>
</body>
</html>
70 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة كود CSS مكثف لإنشاء بطاقات ذات تدرج لوني، وتصميم النماذج، والقوائم الفاصلة، والتأثيرات المماثلة، في حين أن Tailwind يحقق كل ذلك مباشرةً في HTML باستخدام فئات المساعدة مثل background وborder وborder-radius.

❓ أسئلة شائعة

س ما الفرق بين «ring» و«outline»؟
ج يتم تنفيذ ring باستخدام box-shadow، كما يدعم ring-offset من أجل الإزاحة. يستخدم outline الخاصية الأصلية outline ويدعم outline-offset. ولا يؤثر أي منهما على التخطيط. يُوصى باستخدام ring لحالات التركيز، بينما يُعد outline أفضل للخطوط الخارجية الأصلية.
س كيف يمكنني إنشاء نص بتدرج لوني؟
ج استخدم bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent. يقوم bg-clip-text بقص الخلفية لتقتصر على منطقة النص، بينما يجعل text-transparent النص شفافًا بحيث تظهر الخلفية ذات التدرج اللوني من خلاله.
س لماذا يكون اتجاه الفاصل «divide-y» معاكسًا لاتجاه المرونة؟
ج تضيف divide-y فواصلًا أفقية بين العناصر التابعة، وهو ما يناسب العناصر التابعة المكدسة عموديًا. أما divide-x فتضيف فواصلًا رأسية بين العناصر التابعة، وهو ما يناسب العناصر التابعة المرتبة أفقيًّا. ويكون الاتجاه معاكسًا لاتجاه المرونة لضمان العرض الصحيح.
س لماذا ينتج عن استخدام "rounded-full" شكل دائري؟
ج rounded-full يحدد border-radius: 9999px. عندما يكون العرض والارتفاع للعنصر متساويين، فإن القيمة 9999px تكون أكبر بكثير من أبعاد العنصر، لذا يقوم المتصفح تلقائيًا بحسابها على أنها 50٪، مما يؤدي إلى تشكيل دائرة مثالية.

📖 ملخص

📝 تمارين

  1. ⭐ إنشاء زر بتدرج لوني باستخدام bg-gradient-to-r from-blue-600 to-purple-600 وrounded-full

  2. ⭐⭐ قم بإنشاء قائمة مستخدمين باستخدام divide-y divide-gray-200 كفواصل، بحيث يتضمن كل عنصر مستخدم صورة رمزية دائرية (rounded-full) ومعلومات عن المستخدم

  3. ⭐⭐⭐ قم بإنشاء صفحة تسجيل دخول تتميز بخلفية متدرجة، وبطاقة نموذج ذات حدود، وحقول إدخال مع حالات التركيز (focus:ring-2)، وأزرار مستديرة

Web-Tutorial.com

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

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

100%