Sling Academy
Home/Tailwind CSS/How to Change Mouse Cursor in Tailwind CSS

How to Change Mouse Cursor in Tailwind CSS

Last updated: December 18, 2023

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:

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>

That’s it. Happy coding!

Next Article: Tailwind CSS: How to Create a Vertical Divider Line

Previous Article: How to Disable a Link with Tailwind CSS

Series: Basic Tailwind CSS Tutorials for Beginners

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)