Tailwind CSS Cursor Tutorial for Beginners

The cursor property controls how the mouse pointer appears when hovering over an element.

It improves user experience by visually indicating:

Clickable elements
Disabled buttons
Draggable items
Loading states
Resize handles

In Tailwind CSS, you can control the cursor style using simple utility classes.

In this tutorial, you will learn:

Basic cursor utilities
Common interactive cursor types
Resize cursors
Drag-and-drop cursors
Custom cursor values
Responsive cursor utilities

Let’s start.

What is Cursor in CSS?

Traditional CSS:

cursor: pointer;

In Tailwind CSS:

<button class="cursor-pointer"></button>

Much simpler and consistent.

Basic Cursor Utilities

Here are the most commonly used cursor classes:

cursor-auto
cursor-default
cursor-pointer
cursor-wait
cursor-text
cursor-move
cursor-help
cursor-not-allowed
cursor-none

Example Using Tailwind v4 CDN

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10 space-y-6">

  <button class="bg-blue-600 text-white px-6 py-3 cursor-pointer">
    Submit
  </button>

  <button class="bg-yellow-500 text-white px-6 py-3 cursor-progress">
    Saving...
  </button>

  <button class="bg-gray-400 text-white px-6 py-3 cursor-not-allowed" disabled>
    Disabled
  </button>

</body>
</html>

Hover over each button to see the cursor change.

Clickable Elements (cursor-pointer)

Use this for links, buttons, and clickable cards.

<div class="bg-white p-6 shadow-md cursor-pointer hover:shadow-lg">
  Clickable Card
</div>

Best practice: Always use cursor-pointer for interactive elements.

Loading State (cursor-progress / cursor-wait)

<button class="bg-indigo-600 text-white px-6 py-3 cursor-wait">
  Processing...
</button>

This visually communicates that an action is in progress.

Disabled State (cursor-not-allowed)

<button class="bg-gray-400 text-white px-6 py-3 cursor-not-allowed" disabled>
  Not Available
</button>

This improves clarity for users.

Drag and Drop Cursors

Useful in drag-and-drop UI:

cursor-grab
cursor-grabbing

Example:

<div class="bg-white p-6 shadow-md cursor-grab active:cursor-grabbing">
  Drag Me
</div>

This creates a professional draggable interaction.

Resize Cursors

Used in resizable layouts.

Examples:

cursor-col-resize
cursor-row-resize
cursor-n-resize
cursor-e-resize
cursor-s-resize
cursor-w-resize
cursor-ne-resize
cursor-nw-resize
cursor-se-resize
cursor-sw-resize

Example:

<div class="w-64 h-32 bg-gray-300 cursor-col-resize">
  Resize Area
</div>

Commonly used in table column resizing.

Special Cursor Types

Other useful cursor utilities:

cursor-zoom-in
cursor-zoom-out
cursor-copy
cursor-no-drop
cursor-crosshair
cursor-context-menu

Example:

<img src="https://via.placeholder.com/200" class="cursor-zoom-in">

This is useful for image preview features.

Using Custom Cursor Value

You can use a custom cursor:

<button class="cursor-[url(hand.cur),_pointer]">
  Custom Cursor
</button>

This allows using a custom cursor file.

Using CSS Variable

<button class="cursor-(--my-cursor)">
  Variable Cursor
</button>

This is shorthand for:

cursor-[var(--my-cursor)]

Useful in dynamic UI systems.

Responsive Cursor

You can apply cursor utilities conditionally.

Example:

<button class="cursor-not-allowed md:cursor-pointer">
  Responsive Cursor
</button>

Explanation:

Mobile → not allowed
Medium screens and above → pointer

Real-World Example: Interactive Card

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6 cursor-pointer hover:shadow-xl transition">
  <h2 class="text-xl font-bold mb-2">Course Card</h2>
  <p class="text-gray-600">Click to view details</p>
</div>

This gives a clear interactive feel.

Best Practices

If you are learning Tailwind CSS:

Always use cursor-pointer for clickable elements
Use cursor-not-allowed for disabled actions
Use cursor-grab for draggable components
Avoid unnecessary cursor changes
Maintain consistency across your UI

Cursor styles should improve usability — not confuse users.

Frequently Asked Questions

What does cursor-pointer do?

It changes the mouse pointer to a hand icon, indicating the element is clickable.

How do I show disabled state cursor?

Use:

cursor-not-allowed

How do I create draggable effect?

Use:

cursor-grab active:cursor-grabbing

Can I apply cursor only on desktop?

Yes:

md:cursor-pointer

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Opacity Tutorial for Beginners (With Practical Examples)

Next: Tailwind CSS Overflow Tutorial for Beginners

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Tailwind CSS Cursor Tutorial for Beginners

What is Cursor in CSS?

Basic Cursor Utilities

Example Using Tailwind v4 CDN

Clickable Elements (cursor-pointer)

Loading State (cursor-progress / cursor-wait)

Disabled State (cursor-not-allowed)

Drag and Drop Cursors

Resize Cursors

Special Cursor Types

Using Custom Cursor Value

Using CSS Variable

Responsive Cursor

Real-World Example: Interactive Card

Best Practices

Frequently Asked Questions

What does cursor-pointer do?

How do I show disabled state cursor?

How do I create draggable effect?

Can I apply cursor only on desktop?

Your Feedback

Quick Links

Company