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

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us