Cursor

📌 مفهوم

  • cursor یک خاصیت CSS است که تعیین می‌کند نمایش نشانگر موس (cursor) روی یک عنصر چگونه باشد.

  • Tailwind CSS کلاس‌های آماده برای انواع cursor ارائه می‌دهد.

📑 کلاس‌های Tailwind

کلاستوضیح
cursor-autoمرورگر خودش تصمیم می‌گیرد (default)
cursor-defaultفلش پیش‌فرض
cursor-pointerدستک اشاره‌گر (برای دکمه‌ها و لینک‌ها)
cursor-waitساعت شنی یا نماد انتظار
cursor-textحالت انتخاب متن (I-beam)
cursor-moveنشانگر حرکت عناصر
cursor-not-allowedنشانگر ممنوع (غیر قابل کلیک)
cursor-helpنشانگر کمک (علامت سوال)
cursor-crosshairنشانگر نشانه‌گیری دقیق (crosshair)
cursor-grabنشانگر گرفتن (برای draggable)
cursor-grabbingنشانگر در حال گرفتن
cursor-noneپنهان کردن cursor

📌 مثال‌ها

<button class="cursor-pointer bg-blue-500 text-white p-2 rounded">
  Click Me
</button>

<div class="cursor-move border p-4">
  Drag Me
</div>

  • cursor-pointer → وقتی روی دکمه می‌رود، دستک نمایش داده می‌شود

  • cursor-move → وقتی روی div می‌رود، نشانگر حرکت نمایش داده می‌شود

✨ نتیجه: با کلاس‌های cursor در Tailwind می‌توان رفتار موس و بازخورد کاربر را روی عناصر به راحتی کنترل کرد.