EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

خلفيات وحدود Tailwind CSS: الألوان، التدرجات، نصف قطر الحدود، والتحكم بالحدود

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

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

مثال

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-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>

    <!-- درجات الألوان -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">درجات الألوان (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>

    <!-- الشفافية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">شفافية الخلفية</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>
▶ جرّب الكود

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

الفئة قيمة 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 لتعديل الشفافية بسرعة.

خلفيات التدرج (bg-gradient-*)

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

مثال

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 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r (يمينًا)</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l (يسارًا)</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b (أسفل)</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t (أعلى)</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br (أسفل اليمين)</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl (أسفل اليسار)</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr (أعلى اليمين)</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl (أعلى اليسار)</div>
      </div>
    </div>

    <!-- التدرجات ثلاثية الألوان -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التدرجات ثلاثية الألوان (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">أزرق → أخضر → بنفسجي</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">أحمر → أصفر → أخضر</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">وردي → بنفسجي → نيلي</div>
      </div>
    </div>

    <!-- أمثلة عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أمثلة عملية</h3>
      <div class="space-y-4">
        <!-- زر متدرج -->
        <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">
          زر متدرج
        </button>
        <!-- بطاقة متدرجة -->
        <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">بطاقة متدرجة</h4>
          <p class="opacity-90">استخدم خلفيات التدرج لإنشاء جاذبية بصرية</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

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

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

مثال

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 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>

    <!-- موضع صورة الخلفية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">موضع صورة الخلفية</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>

    <!-- قسم البطل -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مثال قسم البطل</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">مرحبًا بكم في موقعنا</h2>
          <p class="text-lg opacity-90">أنشئ تأثيرات خلفية جميلة باستخدام Tailwind CSS</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

الفئة قيمة 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 لوضع قناع تدرج فوق صور الخلفية، مما يحسن قراءة النص.

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

تحدد فئات rounded-* نصف قطر حدود العنصر.

مثال

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="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>

    <!-- نصف قطر الحدود حسب الجانب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">نصف قطر الحدود حسب الجانب</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>

    <!-- نصف قطر الحدود حسب الزاوية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">نصف قطر الحدود حسب الزاوية</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>

    <!-- أمثلة عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أمثلة عملية</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">صورة رمزية</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">زر مستدير</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">وسم</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات نصف قطر الحدود:

الفئة قيمة 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 نصف قطر كبير جدًا 2x
rounded-full border-radius: 9999px مدور بالكامل (دائرة)
rounded-t-lg Top radius 0.5rem الجانب العلوي فقط
rounded-r-lg Right radius 0.5rem الجانب الأيمن فقط
rounded-b-lg Bottom radius 0.5rem الجانب السفلي فقط
rounded-l-lg Left radius 0.5rem الجانب الأيسر فقط
rounded-tl-lg Top-left radius 0.5rem الزاوية العلوية اليسرى فقط
rounded-tr-lg Top-right radius 0.5rem الزاوية العلوية اليمنى فقط
rounded-bl-lg Bottom-left radius 0.5rem الزاوية السفلية اليسرى فقط
rounded-br-lg Bottom-right radius 0.5rem الزاوية السفلية اليمنى فقط

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

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

الحدود (border-*)

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

مثال

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="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>

    <!-- لون الحدود -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">لون الحدود</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">أحمر</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">أزرق</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">أخضر</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">بنفسجي</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">رمادي</div>
      </div>
    </div>

    <!-- الحدود حسب الجانب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الحدود حسب الجانب</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>

    <!-- نمط الحدود -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">نمط الحدود</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>
▶ جرّب الكود

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

الفئة قيمة CSS الوصف
border-0 border-width: 0 بدون حدود
border border-width: 1px حدود 1px
border-2 border-width: 2px حدود 2px
border-4 border-width: 4px حدود 4px
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 للإعلان المباشر.

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

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

مثال

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="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">عنصر 1</div>
        <div class="flex-1 p-4 text-center">عنصر 2</div>
        <div class="flex-1 p-4 text-center">عنصر 3</div>
        <div class="flex-1 p-4 text-center">عنصر 4</div>
      </div>
    </div>

    <!-- الفواصل الأفقية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">فواصل أفقية (تخطيط عمودي)</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">عنصر 1</div>
        <div class="p-4">عنصر 2</div>
        <div class="p-4">عنصر 3</div>
        <div class="p-4">عنصر 4</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="divide-y divide-blue-300">
          <div class="p-3">فاصل أزرق</div>
          <div class="p-3">عنصر 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">فاصل أخضر</div>
          <div class="p-3">عنصر 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">فاصل بنفسجي</div>
          <div class="p-3">عنصر 2</div>
        </div>
      </div>
    </div>

    <!-- مثال عملي: قائمة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مثال عملي: قائمة</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">أحمد محمد</div>
            <div class="text-sm text-gray-500">ahmed@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">تعديل</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">سارة علي</div>
            <div class="text-sm text-gray-500">sara@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">تعديل</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">خالد عبدالله</div>
            <div class="text-sm text-gray-500">khaled@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">تعديل</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

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

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

مثال

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="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>

    <!-- ألوان الحلقة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ألوان الحلقة</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">أحمر</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">أزرق</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">أخضر</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">بنفسجي</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset (إزاحة الحلقة)</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>

    <!-- مثال عملي: حالات التركيز -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مثال عملي: حالات التركيز</h3>
      <div class="space-y-4">
        <input type="text" placeholder="انقر لرؤية تأثير التركيز" 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">
          زر الحلقة
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

الفئة قيمة 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 ... إزاحة 2px
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... إزاحة 4px

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

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

المخطط (outline)

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

مثال

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="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>

    <!-- أنماط المخطط -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أنماط المخطط</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>

    <!-- مثال عملي: حالات التركيز -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مثال عملي: حالات التركيز</h3>
      <div class="space-y-4">
        <input type="text" placeholder="انقر لرؤية تأثير التركيز" 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">
          زر المخطط
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

مثال شامل

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

مثال

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-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">بطاقة متدرجة</h2>
      <p class="opacity-90 mb-6">استخدم خلفيات التدرج ونصف قطر الحدود والظلال لإنشاء بطاقات جميلة</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        ابدأ الآن
      </button>
    </div>

    <!-- نموذج ذو حدود -->
    <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">نموذج تسجيل الدخول</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</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">كلمة المرور</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">
          تسجيل الدخول
        </button>
      </div>
    </div>

    <!-- قائمة الميزات -->
    <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">خلفيات متدرجة</h4>
          <p class="text-sm text-gray-600">دعم تدرجات متعددة الاتجاهات والألوان</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">حدود مستديرة</h4>
          <p class="text-sm text-gray-600">نصف قطر حدود مرن والتحكم بالحدود</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">مخططات الحلقة</h4>
          <p class="text-sm text-gray-600">حالات التركيز وتأثيرات التحديد</p>
        </div>
      </div>
    </div>

    <!-- شبكة الصور -->
    <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>
▶ جرّب الكود

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

❓ أسئلة شائعة

س ما الفرق بين 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 هو عكس اتجاه flex؟
ج تضيف divide-y فواصل أفقية بين العناصر الفرعية، وهو ما يناسب العناصر المكدسة عموديًا. تضيف divide-x فواصل عمودية بين العناصر الفرعية، وهو ما يناسب العناصر الم arranged أفقيًا. الاتجاه هو عكس اتجاه flex لعرض بشكل صحيح.
س لماذا يُنشئ 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)، وأزرار مستديرة

100%