tailwind-css
  1. tailwind-css-cursor
PreviousNext

Tailwind CSS - Cursor

The cursor utilities in Tailwind CSS helps in setting the cursor type for any HTML element. This page will discuss the syntax, examples, output, explanation, use, important points, and summary of the cursor utilities in Tailwind CSS.

Syntax

The syntax of the cursor utilities in Tailwind CSS is:

<div class="cursor-{value}"></div>

where {value} is one of the following values:

  • auto
  • default
  • pointer
  • wait
  • text
  • move
  • not-allowed

Example

Let's take an example of each cursor utility:

<div class="cursor-auto">Auto</div>
<div class="cursor-default">Default</div>
<div class="cursor-pointer">Pointer</div>
<div class="cursor-wait">Wait</div>
<div class="cursor-text">Text</div>
<div class="cursor-move">Move</div>
<div class="cursor-not-allowed">Not allowed</div>

Output

The above code will generate the following output:

Tailwind CSS Cursor Output

Explanation

  • cursor-auto: Sets the cursor type to auto
  • cursor-default: Sets the cursor type to default
  • cursor-pointer: Sets the cursor type to pointer
  • cursor-wait: Sets the cursor type to wait
  • cursor-text: Sets the cursor type to text
  • cursor-move: Sets the cursor type to move
  • cursor-not-allowed: Sets the cursor type to not-allowed

Use

The cursor utilities are used to change the appearance of the cursor on hover for any HTML element. It helps in making the user experience better by indicating the user the type of interaction possible with the element.

Important Points

  • The cursor utilities only work on elements that can respond to user interaction, such as links, buttons, and input fields.
  • The cursor utilities can be combined with other Tailwind utilities to create custom cursor designs.
  • The cursor-not-allowed is used to indicate that the interaction with the element is not possible or disabled.

Summary

The cursor utilities in Tailwind CSS help in setting the cursor type for any HTML element. It provides several values to set different shapes of the cursor. It helps in providing better user experience by indicating the interaction possibilities with the element.

AppearanceCaret Color
Published on: