Tailwind CSS: الحالات التفاعلية في Tailwind CSS

آخر تحديث: 2026-08-26

1. نظرة عامة على بادئات الولايات

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

البادئة الفئة الزائفة في CSS الوصف
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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>State Prefix 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">
    <!-- hover state -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hover state</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">
          Darken on hover
        </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">
          Border on hover
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:shadow-lg hover:shadow-green-500/50 transition-all">
          Shadow on hover
        </button>
      </div>
    </div>

    <!-- focus state -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">focus state</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Click the input to see focus effect"
               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="Custom focus shadow"
               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 state -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">active state</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">
          Darken and shrink on press
        </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">
          Press effect
        </button>
      </div>
    </div>

    <!-- disabled state -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">disabled state</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">
          Enabled button
        </button>
        <button disabled class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
          Disabled button
        </button>
        <input type="text" placeholder="Enabled input"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
        <input type="text" disabled placeholder="Disabled input"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
      </div>
    </div>

    <!-- visited links -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">visited links</h3>
      <div class="flex gap-4">
        <a href="#visited1" class="text-blue-600 hover:text-blue-800 visited:text-purple-600">
          Turns purple after clicking
        </a>
        <a href="#visited2" class="text-green-600 hover:text-green-800 visited:text-gray-400">
          Turns gray after clicking
        </a>
      </div>
    </div>
  </div>
</body>
</html>
73 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

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

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


2. الفئات الزائفة الهيكلية (الأول/الأخير/الفردي/الزوجي)

تُستخدم بادئات الفئات الزائفة الهيكلية لاختيار العناصر التابعة في مواقع محددة.

▶ مثال

HTML 📖 للعرض فقط
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Structural Pseudo-class 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">
    <!-- 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 item (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">
          Second item
        </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">
          Third item
        </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 item (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">Row 1 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Row 2 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Row 3 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Row 4 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Row 5 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50">Row 6 (even:bg-gray-50)</li>
      </ul>
    </div>

    <!-- Table example -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Table zebra stripes</h3>
      <table class="w-full">
        <thead>
          <tr class="bg-gray-100">
            <th class="p-3 text-left">Name</th>
            <th class="p-3 text-left">Email</th>
            <th class="p-3 text-left">Role</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Alice</td>
            <td class="p-3">alice@example.com</td>
            <td class="p-3">Admin</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Bob</td>
            <td class="p-3">bob@example.com</td>
            <td class="p-3">Editor</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Charlie</td>
            <td class="p-3">charlie@example.com</td>
            <td class="p-3">User</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Diana</td>
            <td class="p-3">diana@example.com</td>
            <td class="p-3">User</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
75 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

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


3. group-hover و peer

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

▶ مثال

HTML 📖 للعرض فقط
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>group-hover and peer 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">
    <!-- group-hover parent-child hover -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">group-hover parent-child 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">Design Tools</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Hover over the parent to see the effect</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">Performance</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Hover over the parent to see the effect</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">Security</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Hover over the parent to see the effect</p>
        </div>
      </div>
    </div>

    <!-- group combined usage -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">group combined usage</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">Menu item 1</h4>
            <p class="text-sm text-gray-500 group-hover:text-blue-400 transition-colors">Description text</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">Menu item 2</h4>
            <p class="text-sm text-gray-500 group-hover:text-green-400 transition-colors">Description text</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 sibling elements -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">peer sibling elements</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">
            Email address
          </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">
            Password
          </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">I agree to the terms of service</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
103 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

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


4. أنماط المؤشر (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 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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cursor Styles 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">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Cursor Styles</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>
66 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

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


5. عنصر التحكم في التحديد (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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selection Control 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">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Selection Control</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: Not selectable</p>
          <p class="select-none">This text cannot be selected, suitable for buttons, labels, and other interactive elements.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-text: Selectable (default)</p>
          <p class="select-text">This text can be selected, suitable for body content.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-all: Click to select all</p>
          <p class="select-all bg-blue-50 p-2 rounded font-mono">const apiKey = "abc123";</p>
        </div>
      </div>
    </div>

    <!-- Practical application -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application</h3>
      <div class="space-y-4">
        <!-- Code block -->
        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm select-all">
          npm install tailwindcss
        </div>
        <!-- Button text not selectable -->
        <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 text not selectable
          </button>
          <button class="px-6 py-3 bg-green-500 text-white rounded-lg select-none cursor-pointer hover:bg-green-600">
            Confirm Submit
          </button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
46 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

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


6. عنصر التحكم في تغيير الحجم (resize-*)

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

الفئة قيمة CSS الوصف
resize-none resize: none لا يمكن تغيير حجمه
resize-y resize: vertical تغيير الحجم الرأسي فقط
resize-x resize: horizontal تغيير الحجم أفقيًّا فقط
resize resize: both قابل لتغيير الحجم

▶ مثال

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resize Control 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">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Resize Control</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: Not resizable</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="Non-resizable textarea"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-y: Vertical resize only</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="Vertically resizable textarea"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-x: Horizontal resize only</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="Horizontally resizable textarea"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize: Resizable</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize h-24 focus:outline-none focus:border-blue-500"
                    placeholder="Freely resizable textarea"></textarea>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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


7. سلوك التمرير (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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Behavior 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">
    <!-- Smooth scrolling -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Smooth Scrolling</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">Jump to Section 1</a>
        <a href="#section2" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">Jump to Section 2</a>
        <a href="#section3" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">Jump to Section 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">Section 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">Section 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">Section 3</h4>
        </div>
      </div>
    </div>

    <!-- Scroll snapping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Scroll Snapping</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">Card 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">Card 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">Card 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">Card 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">Card 5</span>
        </div>
      </div>
    </div>

    <!-- Hidden scrollbar -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Hidden Scrollbar</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">
          Hidden scrollbar
        </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">
          Using 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">
          Horizontally scrollable
        </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">
          Keep scrolling
        </div>
      </div>
    </div>
  </div>
</body>
</html>
69 سطر من الكود المنطقي (تجاوز الحد 40, للعرض فقط)

نصيحة: تؤدي إضافة 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 إلى العناصر التابعة.

📖 ملخص

📝 تمارين

  1. ⭐ قم بإنشاء مكون زر باستخدام بادئات الحالات hover: وfocus: وactive: وdisabled: لتنفيذ تصميم تفاعلي كامل للحالات

  2. ⭐⭐ إنشاء قائمة تنقل باستخدام group وgroup-hover: لتنفيذ تغييرات منسقة عند تمرير المؤشر فوق الرموز والنصوص والأسهم

  3. ⭐⭐⭐ قم بإنشاء نموذج باستخدام peer وpeer-focus: لتطبيق تأثيرات التسميات العائمة، مع دمجها مع حالات focus: وinvalid: لتصميم أنماط التحقق من صحة النموذج

Web-Tutorial.com

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

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

100%