VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-cursor/

⇱ Tailwind CSS Cursor - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Cursor

Last Updated : 23 Jul, 2025

Tailwind CSS offers various utility classes to set the mouse cursor appearance when pointing at an element. These classes correspond to the CSS cursor property, allowing you to quickly specify the cursor type without writing custom CSS

Cursor Classes:

ClassDescription
cursor-autoDefault cursor set by the browser.
cursor-defaultDefault cursor appearance.
cursor-pointerThe cursor appears as a pointer, indicating a link.
cursor-waitThe cursor indicates that the program or process is busy.
cursor-textCursor indicates text that can be selected.
cursor-moveCursor indicates that the element can be moved.
cursor-helpCursor indicates that help is available.
cursor-not-allowedCursor indicates that the requested action will not be executed.

Syntax

<element class="cursor-{behaviour}">...</element>

Example: In this example we use Tailwind CSS via CDN, showcasing various cursor utility classes (cursor-auto, cursor-default, cursor-pointer, cursor-wait) with styled elements for hover interactions.

Output:

👁 Image

Tailwind CSS simplifies cursor management with utility classes that mirror the CSS cursor property. These classes enhance user interactions by clearly indicating available actions, such as links, text selection, and restricted actions. Utilizing these classes, you can efficiently style cursor appearances without additional CSS, ensuring a responsive and intuitive user experience.

Comment