How to Change Mouse Cursor in Tailwind CSS

In Tailwind CSS, you can use the cursor-{style} utility to set the mouse cursor, if any, to show when the mouse pointer is over an element. Common styles of mouse cursors and corresponding classes are:

• auto: cursor-auto
• default: cursor-default
• pointer: cursor-pointer
• wait: cursor-wait
• text: cursor-text
• not allowed: cursor-not-allowed
• progress: cursor-progress

Example

Preview:

Note: If you’re using Safari, this demo video might not work nicely or not start at all. Please use Chrome, Edge, Firefox, or another web browser instead.

The code:

<div class="flex p-10">
        <div class="cursor-not-allowed w-48 h-72 bg-rose-500"></div>
        <div class="cursor-progress w-48 h-72 bg-blue-500"></div>
        <div class="cursor-pointer w-48 h-72 bg-amber-500"></div>
        <div class="cursor-text w-48 h-72 bg-cyan-500"></div>
</div>

Further reading:

• Tailwind CSS: How to Create a Sticky/Affix NavBar
• How to Style Placeholder Text with Tailwind CSS
• Text Shadows in Tailwind CSS
• How to Use Tailwind CSS in React
• CSS: Styling Scrollbar Example

References:

• Cursor: User Interface (Wikipedia)
• Tailwind CSS: Cursor (official docs)

You can also check out our CSS category page for the latest tutorials and examples.