حالات التفاعل في Tailwind CSS: بادئات الحالات hover/focus/active وأنماط المؤشر

Q: ما الفرق بين group-hover و hover؟

hover: هو حالة تمرير العنصر نفسه. group-hover: تطبق الأنماط على العناصر الابنة عند مرور الماوس فوق العنصر الأب (الذي يحمل فئة group ). مثالي لتأثيرات التمرير المنسقة بين العناصر الأب والابنة.

Q: كيف يعمل peer؟

أضف الفئة peer إلى عنصر، ثم استخدم بادئات مثل peer-focus: و peer-valid: لتنسيق العناصر الشقيقة اللاحقة. يُستخدم عادةً للتسميات العائمة والتحقق من صحة النماذج.

Q: لماذا لا يعمل disabled:opacity-50؟

تأكد من أن البادئة disabled: تُستخدم مع سمة disabled الفعلية. يُنشئ Tailwind المحدد .disabled\:opacity-50:disabled ، لذا يجب أن يحتوي العنصر على سمة disabled لكي يظهر التأثير.

Q: كيف أُنفذ التقاط التمرير؟

أضف snap-x snap-mandatory (أفقي) أو snap-y snap-mandatory (عمودي) إلى حاوية التمرير، وأضف snap-center أو snap-start إلى العناصر الابنة.

نظرة عامة على بادئات الحالات

يستخدم Tailwind بادئات الحالات لتطبيق الأنماط على العناصر في حالات مختلفة دون كتابة pseudo-class في CSS.

البادئة	CSS Pseudo-class	الوصف
`hover:`	`:hover`	التمرير بالماوس
`focus:`	`:focus`	التركيز
`active:`	`:active`	الضغط بالماوس
`disabled:`	`:disabled`	حالة التعطيل
`visited:`	`:visited`	رابط تمت زيارته
`first:`	`:first-child`	أول عنصر ابن
`last:`	`:last-child`	آخر عنصر ابن
`odd:`	`:nth-child(odd)`	عنصر ابن فردي
`even:`	`:nth-child(even)`	عنصر ابن زوجي

مثال

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">
    <!-- حالة hover -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حالة hover</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors">
          يتحول أغمق عند التمرير
        </button>
        <button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">
          يظهر حد عند التمرير
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:shadow-lg hover:shadow-green-500/50 transition-all">
          يظهر ظل عند التمرير
        </button>
      </div>
    </div>

    <!-- حالة focus -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حالة focus</h3>
      <div class="space-y-4">
        <input type="text" placeholder="انقر على حقل الإدخال لرؤية تأثير التركيز"
               class="w-full p-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
        <input type="text" placeholder="ظل تركيز مخصص"
               class="w-full p-3 border border-gray-300 rounded-lg focus:shadow-lg focus:shadow-purple-500/30 focus:border-purple-500 focus:outline-none transition-all">
      </div>
    </div>

    <!-- حالة active -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حالة active</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:bg-blue-800 active:scale-95 transition-all">
          يتحول أغمق ويتقلص عند الضغط
        </button>
        <button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 active:bg-gray-100 active:scale-95 transition-all">
          تأثير الضغط
        </button>
      </div>
    </div>

    <!-- حالة disabled -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حالة disabled</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
          زر مفعّل
        </button>
        <button disabled class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
          زر معطّل
        </button>
        <input type="text" placeholder="حقل إدخال مفعّل"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
        <input type="text" disabled placeholder="حقل إدخال معطّل"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
      </div>
    </div>

    <!-- الروابط التي تمت زيارتها -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الروابط التي تمت زيارتها</h3>
      <div class="flex gap-4">
        <a href="#visited1" class="text-blue-600 hover:text-blue-800 visited:text-purple-600">
          يتحول إلى بنفسجي بعد النقر
        </a>
        <a href="#visited2" class="text-green-600 hover:text-green-800 visited:text-gray-400">
          يتحول إلى رمادي بعد النقر
        </a>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة قواعد pseudo-class مثل button:hover { background-color: ... }، بينما يستخدم Tailwind بادئات مثل hover:bg-blue-700 لإعلانها مباشرة.

💡 نصيحة: يمكن دمج بادئات الحالات، مثل hover:focus:ring-2 لتطبيق الأنماط عند التمرير والتركيز معاً.

Pseudo-classes الهيكلية (first/last/odd/even)

تُستخدم بادئات Pseudo-classes الهيكلية لاختيار العناصر الابنة في مواضع محددة.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض Pseudo-classes الهيكلية</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">
    <!-- first/last -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">first/last</h3>
      <ul class="space-y-2">
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          العنصر الأول (first:bg-blue-50)
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          العنصر الثاني
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          العنصر الثالث
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          العنصر الأخير (last:bg-green-50)
        </li>
      </ul>
    </div>

    <!-- odd/even -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">odd/even</h3>
      <ul class="space-y-0">
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">الصف 1 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">الصف 2 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">الصف 3 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">الصف 4 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">الصف 5 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50">الصف 6 (even:bg-gray-50)</li>
      </ul>
    </div>

    <!-- مثال الجدول -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">خطوط الحمار الوحشي في الجدول</h3>
      <table class="w-full">
        <thead>
          <tr class="bg-gray-100">
            <th class="p-3 text-left">الاسم</th>
            <th class="p-3 text-left">البريد الإلكتروني</th>
            <th class="p-3 text-left">الدور</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">أليس</td>
            <td class="p-3">alice@example.com</td>
            <td class="p-3">مسؤول</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">بوب</td>
            <td class="p-3">bob@example.com</td>
            <td class="p-3">محرر</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">تشارلي</td>
            <td class="p-3">charlie@example.com</td>
            <td class="p-3">مستخدم</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">ديانا</td>
            <td class="p-3">diana@example.com</td>
            <td class="p-3">مستخدم</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة محددات مثل li:first-child { ... } أو tr:nth-child(even) { ... }، بينما يستخدم Tailwind بادئات مثل first:bg-blue-50 و even:bg-gray-50 لإعلانها مباشرة.

group-hover و peer

يُستخدم group-hover: و peer للتعامل مع حالات التفاعل بين العناصر الأب-ابن أو العناصر الشقيقة.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض group-hover و peer</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">
    <!-- group-hover تأثير الأب-ابن -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">group-hover تأثير الأب-ابن</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-blue-500 transition-colors">
            <span class="text-blue-500 group-hover:text-white transition-colors">🎨</span>
          </div>
          <h4 class="font-semibold group-hover:text-blue-600 transition-colors">أدوات التصميم</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">مرر فوق العنصر الأب لرؤية التأثير</p>
        </div>
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-green-500 transition-colors">
            <span class="text-green-500 group-hover:text-white transition-colors">⚡</span>
          </div>
          <h4 class="font-semibold group-hover:text-green-600 transition-colors">الأداء</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">مرر فوق العنصر الأب لرؤية التأثير</p>
        </div>
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-purple-500 transition-colors">
            <span class="text-purple-500 group-hover:text-white transition-colors">🔒</span>
          </div>
          <h4 class="font-semibold group-hover:text-purple-600 transition-colors">الأمان</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">مرر فوق العنصر الأب لرؤية التأثير</p>
        </div>
      </div>
    </div>

    <!-- استخدام group المدمج -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">استخدام group المدمج</h3>
      <div class="space-y-4">
        <div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-500 transition-colors">
            <svg class="w-5 h-5 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </div>
          <div class="flex-1">
            <h4 class="font-medium group-hover:text-blue-600 transition-colors">عنصر القائمة 1</h4>
            <p class="text-sm text-gray-500 group-hover:text-blue-400 transition-colors">نص الوصف</p>
          </div>
          <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>

        <div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-green-50 transition-colors cursor-pointer">
          <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center group-hover:bg-green-500 transition-colors">
            <svg class="w-5 h-5 text-green-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </div>
          <div class="flex-1">
            <h4 class="font-medium group-hover:text-green-600 transition-colors">عنصر القائمة 2</h4>
            <p class="text-sm text-gray-500 group-hover:text-green-400 transition-colors">نص الوصف</p>
          </div>
          <svg class="w-5 h-5 text-gray-400 group-hover:text-green-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- العناصر الشقيقة peer -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">العناصر الشقيقة peer</h3>
      <div class="space-y-4">
        <div>
          <input type="email" id="email" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
          <label for="email"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-blue-500">
            البريد الإلكتروني
          </label>
        </div>
        <div class="relative">
          <input type="password" id="password" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-500/50 focus:outline-none transition-all">
          <label for="password"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-purple-500">
            كلمة المرور
          </label>
        </div>
        <div class="flex items-center gap-3">
          <input type="checkbox" id="agree" class="peer sr-only">
          <label for="agree"
                 class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 cursor-pointer transition-colors flex items-center justify-center">
            <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
            </svg>
          </label>
          <span class="text-gray-700">أوافق على شروط الخدمة</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: أضف الفئة group إلى العنصر الأب، ثم استخدم البادئة group-hover: على العناصر الابنة. أضف الفئة peer إلى العنصر الشقيق السابق، ثم استخدم بادئات مثل peer-focus: على العناصر الشقيقة اللاحقة.

أنماط المؤشر (cursor-*)

تتحكم فئات cursor-* في نمط المؤشر عند مرور الماوس فوق عنصر.

الفئة	قيمة CSS	الوصف
`cursor-auto`	`cursor: auto`	تلقائي (افتراضي)
`cursor-default`	`cursor: default`	سهم افتراضي
`cursor-pointer`	`cursor: pointer`	مؤشر يد
`cursor-wait`	`cursor: wait`	انتظار
`cursor-text`	`cursor: text`	تحديد نص
`cursor-move`	`cursor: move`	تحريك
`cursor-not-allowed`	`cursor: not-allowed`	غير مسموح
`cursor-grab`	`cursor: grab`	قبض
`cursor-grabbing`	`cursor: grabbing`	جر
`cursor-crosshair`	`cursor: crosshair`	متصالب
`cursor-zoom-in`	`cursor: zoom-in`	تكبير
`cursor-zoom-out`	`cursor: zoom-out`	تصغير

مثال

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">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أنماط المؤشر</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-auto">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-auto</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-default">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-default</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-pointer">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-pointer</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-wait">
          <div class="text-2xl mb-2">⏳</div>
          <div class="text-sm">cursor-wait</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-text">
          <div class="text-2xl mb-2">📝</div>
          <div class="text-sm">cursor-text</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-move">
          <div class="text-2xl mb-2">✋</div>
          <div class="text-sm">cursor-move</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-not-allowed">
          <div class="text-2xl mb-2">🚫</div>
          <div class="text-sm">cursor-not-allowed</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-grab">
          <div class="text-2xl mb-2">✊</div>
          <div class="text-sm">cursor-grab</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-grabbing">
          <div class="text-2xl mb-2">✊</div>
          <div class="text-sm">cursor-grabbing</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-crosshair">
          <div class="text-2xl mb-2">➕</div>
          <div class="text-sm">cursor-crosshair</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-in">
          <div class="text-2xl mb-2">🔍</div>
          <div class="text-sm">cursor-zoom-in</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-out">
          <div class="text-2xl mb-2">🔍</div>
          <div class="text-sm">cursor-zoom-out</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص CSS مثل cursor: pointer، بينما يستخدم Tailwind أسماء الفئات مثل cursor-pointer لإعلانها مباشرة.

التحكم في التحديد (select-*)

تتحكم فئات select-* في إمكانية تحديد المستخدم للنص.

الفئة	قيمة CSS	الوصف
`select-none`	`user-select: none`	غير قابل للتحديد
`select-text`	`user-select: text`	قابل للتحديد (افتراضي)
`select-all`	`user-select: all`	نقر لتحديد الكل
`select-auto`	`user-select: auto`	تلقائي

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التحكم في التحديد</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التحكم في التحديد</h3>
      <div class="space-y-4">
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-none: غير قابل للتحديد</p>
          <p class="select-none">لا يمكن تحديد هذا النص، مناسب للأزرار والتسميات والعناصر التفاعلية الأخرى.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-text: قابل للتحديد (افتراضي)</p>
          <p class="select-text">يمكن تحديد هذا النص، مناسب لمحتوى الجسم.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-all: نقر لتحديد الكل</p>
          <p class="select-all bg-blue-50 p-2 rounded font-mono">const apiKey = "abc123";</p>
        </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="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm select-all">
          npm install tailwindcss
        </div>
        <!-- نص الزر غير قابل للتحديد -->
        <div class="flex gap-4">
          <button class="px-6 py-3 bg-blue-500 text-white rounded-lg select-none cursor-pointer hover:bg-blue-600">
            نص الزر غير قابل للتحديد
          </button>
          <button class="px-6 py-3 bg-green-500 text-white rounded-lg select-none cursor-pointer hover:bg-green-600">
            تأكيد الإرسال
          </button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: يُستخدم select-none عادةً للأزرار والتسميات والعناصر الأخرى التي لا يحتاج فيها النص إلى تحديد. يُستخدم select-all عادةً لكتل الكود وأسطر الأوامر حيث يُرغب في النسخ بنقرة واحدة.

التحكم في تغيير الحجم (resize-*)

تتحكم فئات resize-* في إمكانية تغيير حجم العنصر.

الفئة	قيمة CSS	الوصف
`resize-none`	`resize: none`	غير قابل لتغيير الحجم
`resize-y`	`resize: vertical`	تغيير حجم عمودي فقط
`resize-x`	`resize: horizontal`	تغيير حجم أفقي فقط
`resize`	`resize: both`	قابل لتغيير الحجم

مثال

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-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-none: غير قابل لتغيير الحجم</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-none h-24 focus:outline-none focus:border-blue-500"
                    placeholder="منطقة نص غير قابلة لتغيير الحجم"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-y: تغيير حجم عمودي فقط</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-y h-24 focus:outline-none focus:border-blue-500"
                    placeholder="منطقة نص قابلة لتغيير الحجم عمودياً"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-x: تغيير حجم أفقي فقط</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-x h-24 focus:outline-none focus:border-blue-500"
                    placeholder="منطقة نص قابلة لتغيير الحجم أفقياً"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize: قابل لتغيير الحجم</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize h-24 focus:outline-none focus:border-blue-500"
                    placeholder="منطقة نص قابلة لتغيير الحجم بحرية"></textarea>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص CSS مثل resize: vertical، بينما يستخدم Tailwind أسماء الفئات مثل resize-y لإعلانها مباشرة.

سلوك التمرير (scroll-*)

تتحكم فئات scroll-* في سلوك التمرير.

الفئة	قيمة CSS	الوصف
`scroll-auto`	`scroll-behavior: auto`	تلقائي (افتراضي)
`scroll-smooth`	`scroll-behavior: smooth`	تمرير سلس
`snap-start`	`scroll-snap-align: start`	الالتقاط عند البداية
`snap-center`	`scroll-snap-align: center`	الالتقاط عند المركز
`snap-end`	`scroll-snap-align: end`	الالتقاط عند النهاية
`snap-none`	`scroll-snap-type: none`	بدون التقاط
`snap-x`	`scroll-snap-type: x mandatory`	التقاط أفقي
`snap-y`	`scroll-snap-type: y mandatory`	التقاط عمودي

مثال

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 gap-4 mb-4">
        <a href="#section1" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">الانتقال إلى القسم 1</a>
        <a href="#section2" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">الانتقال إلى القسم 2</a>
        <a href="#section3" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">الانتقال إلى القسم 3</a>
      </div>
      <div class="h-48 overflow-y-auto scroll-smooth border rounded-lg">
        <div id="section1" class="p-4 bg-blue-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-blue-700">القسم 1</h4>
        </div>
        <div id="section2" class="p-4 bg-green-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-green-700">القسم 2</h4>
        </div>
        <div id="section3" class="p-4 bg-purple-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-purple-700">القسم 3</h4>
        </div>
      </div>
    </div>

    <!-- التقاط التمرير -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التقاط التمرير</h3>
      <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 pb-4">
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-blue-100 rounded-lg flex items-center justify-center">
          <span class="text-blue-700 font-semibold">البطاقة 1</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-green-100 rounded-lg flex items-center justify-center">
          <span class="text-green-700 font-semibold">البطاقة 2</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-purple-100 rounded-lg flex items-center justify-center">
          <span class="text-purple-700 font-semibold">البطاقة 3</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-orange-100 rounded-lg flex items-center justify-center">
          <span class="text-orange-700 font-semibold">البطاقة 4</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-red-100 rounded-lg flex items-center justify-center">
          <span class="text-red-700 font-semibold">البطاقة 5</span>
        </div>
      </div>
    </div>

    <!-- شريط تمرير مخفي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">شريط تمرير مخفي</h3>
      <div class="flex overflow-x-auto scrollbar-hide gap-4 pb-4">
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white">
          شريط تمرير مخفي
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center text-white">
          استخدام scrollbar-hide
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center text-white">
          قابل للتمرير أفقياً
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-orange-400 to-orange-600 rounded-lg flex items-center justify-center text-white">
          استمر في التمرير
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: إضافة scroll-smooth إلى عنصر <html> تفعّل التمرير السلس للصفحة بأكملها. دمج snap-x snap-mandatory مع snap-center يُنشئ تأثير كاروسيل.

❓ أسئلة شائعة

س ما الفرق بين group-hover و hover؟

ج hover: هو حالة تمرير العنصر نفسه. group-hover: تطبق الأنماط على العناصر الابنة عند مرور الماوس فوق العنصر الأب (الذي يحمل فئة group). مثالي لتأثيرات التمرير المنسقة بين العناصر الأب والابنة.

س كيف يعمل peer؟

ج أضف الفئة peer إلى عنصر، ثم استخدم بادئات مثل peer-focus: و peer-valid: لتنسيق العناصر الشقيقة اللاحقة. يُستخدم عادةً للتسميات العائمة والتحقق من صحة النماذج.

س لماذا لا يعمل disabled:opacity-50؟

ج تأكد من أن البادئة disabled: تُستخدم مع سمة disabled الفعلية. يُنشئ Tailwind المحدد .disabled\:opacity-50:disabled، لذا يجب أن يحتوي العنصر على سمة disabled لكي يظهر التأثير.

س كيف أُنفذ التقاط التمرير؟

ج أضف snap-x snap-mandatory (أفقي) أو snap-y snap-mandatory (عمودي) إلى حاوية التمرير، وأضف snap-center أو snap-start إلى العناصر الابنة.

📖 ملخص

hover: و focus: و active: و disabled: وبادئات الحالات الأخرى تتحكم في حالات تفاعل العناصر
first: و last: و odd: و even: و Pseudo-classes الهيكلية الأخرى تختار عناصر ابن محددة
group و group-hover: تتعامل مع تأثيرات التمرير المنسقة بين العناصر الأب والابنة
peer و peer-focus: تتعامل مع الحالات المنسقة بين العناصر الشقيقة
cursor-* تتحكم في أنماط المؤشر، و select-* تتحكم في تحديد النص
resize-* تتحكم في تغيير حجم العناصر، و scroll-* تتحكم في سلوك التمرير

📝 تمارين

⭐ أنشئ مكوّن زر باستخدام بادئات الحالات hover: و focus: و active: و disabled: لتنفيذ أنماط حالة تفاعل كاملة
⭐⭐ أنشئ قائمة تنقل باستخدام group و group-hover: لتنفيذ تغييرات تمرير منسقة للأيقونات والنصوص والأسهم
⭐⭐⭐ أنشئ نموذجاً باستخدام peer و peer-focus: لتنفيذ تأثيرات التسميات العائمة، مُقترناً بحالات focus: و invalid: لتنسيق التحقق من صحة النموذج