Tailwind CSS Cursor

Tailwind CSS provides utility classes to control the appearance of the mouse cursor when hovering over an element. These utilities correspond to the CSS cursor property and help indicate whether an element is clickable, draggable, selectable, or performing an operation.

The following table lists commonly used cursor utility classes in Tailwind CSS.

Class	Description
`cursor-auto`	Allows the browser to choose the appropriate cursor.
`cursor-default`	Displays the default cursor, usually an arrow.
`cursor-pointer`	Displays a pointer cursor, typically indicating an interactive element.
`cursor-wait`	Displays a cursor indicating that the user should wait.
`cursor-text`	Displays a text-selection cursor.
`cursor-move`	Indicates that an element can be moved.
`cursor-help`	Indicates that help is available.
`cursor-not-allowed`	Indicates that an action is unavailable.
`cursor-none`	Hides the cursor.
`cursor-context-menu`	Indicates that a context menu is available.
`cursor-progress`	Indicates that a process is running while interaction may still be possible.
`cursor-cell`	Displays a cell-selection cursor.
`cursor-crosshair`	Displays a crosshair cursor.
`cursor-vertical-text`	Displays a vertical text-selection cursor.
`cursor-alias`	Indicates that an alias or shortcut can be created.
`cursor-copy`	Indicates that content can be copied.
`cursor-no-drop`	Indicates that dropping an item is not allowed.
`cursor-grab`	Indicates that an element can be grabbed.
`cursor-grabbing`	Indicates that an element is being grabbed.
`cursor-all-scroll`	Indicates that an element can be scrolled in any direction.
`cursor-col-resize`	Indicates that a column can be resized.
`cursor-row-resize`	Indicates that a row can be resized.
`cursor-n-resize`	Indicates that an element can be resized upward or downward from its north edge.
`cursor-e-resize`	Indicates that an element can be resized horizontally from its east edge.
`cursor-s-resize`	Indicates that an element can be resized downward or upward from its south edge.
`cursor-w-resize`	Indicates that an element can be resized horizontally from its west edge.
`cursor-ne-resize`	Indicates that an element can be resized diagonally toward the northeast.
`cursor-nw-resize`	Indicates that an element can be resized diagonally toward the northwest.
`cursor-se-resize`	Indicates that an element can be resized diagonally toward the southeast.
`cursor-sw-resize`	Indicates that an element can be resized diagonally toward the southwest.
`cursor-ew-resize`	Indicates horizontal resizing.
`cursor-ns-resize`	Indicates vertical resizing.
`cursor-nesw-resize`	Indicates diagonal resizing along the northeast–southwest axis.
`cursor-nwse-resize`	Indicates diagonal resizing along the northwest–southeast axis.
`cursor-zoom-in`	Indicates that an element can be zoomed in.
`cursor-zoom-out`	Indicates that an element can be zoomed out.

Tailwind CSS also supports arbitrary cursor values through cursor-[<value>] and CSS custom properties through cursor-(<custom-property>).

Syntax:

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

Replace {value} with a supported cursor value, such as pointer, wait, text, or grab.

Example: In this example, Tailwind CSS is used through its browser CDN to demonstrate different cursor utility classes. Hover over each colored box to observe the cursor change.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Cursor Classes</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-8">

    <h1 class="mb-2 text-center text-3xl font-bold text-green-700">
        Tailwind CSS Cursor Classes
    </h1>

    <p class="mb-8 text-center text-gray-600">
        Hover over each box to see the cursor change.
    </p>

    <div class="mx-auto grid max-w-3xl grid-cols-1 gap-5 sm:grid-cols-2">

        <div class="cursor-auto rounded-lg border-2 border-blue-700
                    bg-blue-100 p-8 text-center shadow">
            <h2 class="font-bold text-blue-800">cursor-auto</h2>
            <p class="mt-2 text-sm">Browser-selected cursor</p>
        </div>

        <div class="cursor-default rounded-lg border-2 border-yellow-700
                    bg-yellow-100 p-8 text-center shadow">
            <h2 class="font-bold text-yellow-800">cursor-default</h2>
            <p class="mt-2 text-sm">Default cursor</p>
        </div>

        <div class="cursor-pointer rounded-lg border-2 border-purple-700
                    bg-purple-100 p-8 text-center shadow">
            <h2 class="font-bold text-purple-800">cursor-pointer</h2>
            <p class="mt-2 text-sm">Pointer cursor</p>
        </div>

        <div class="cursor-wait rounded-lg border-2 border-green-700
                    bg-green-100 p-8 text-center shadow">
            <h2 class="font-bold text-green-800">cursor-wait</h2>
            <p class="mt-2 text-sm">Wait cursor</p>
        </div>

        <div class="cursor-text rounded-lg border-2 border-pink-700
                    bg-pink-100 p-8 text-center shadow">
            <h2 class="font-bold text-pink-800">cursor-text</h2>
            <p class="mt-2 text-sm">Text-selection cursor</p>
        </div>

        <div class="cursor-grab rounded-lg border-2 border-indigo-700
                    bg-indigo-100 p-8 text-center shadow">
            <h2 class="font-bold text-indigo-800">cursor-grab</h2>
            <p class="mt-2 text-sm">Grab cursor</p>
        </div>

        <div class="cursor-not-allowed rounded-lg border-2 border-red-700
                    bg-red-100 p-8 text-center shadow">
            <h2 class="font-bold text-red-800">cursor-not-allowed</h2>
            <p class="mt-2 text-sm">Unavailable-action cursor</p>
        </div>

        <div class="cursor-zoom-in rounded-lg border-2 border-teal-700
                    bg-teal-100 p-8 text-center shadow">
            <h2 class="font-bold text-teal-800">cursor-zoom-in</h2>
            <p class="mt-2 text-sm">Zoom-in cursor</p>
        </div>

    </div>

</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Explore