Tailwind CSS - Cursor

Tailwind CSS - Cursor

The cursor utility in Tailwind CSS allows you to control the mouse cursor’s appearance when a user hovers over an element. This is essential for providing visual feedback and improving user experience (UX) by indicating an element’s interactivity.

Modern Development Setup

While you can use the Tailwind Play CDN for quick demos, a professional setup involves installing Tailwind CSS via a package manager like npm or yarn. This allows for full customization, performance optimization through purging unused styles, and integration into modern build pipelines.

# 1. Install Tailwind CSS via npm
npm install -D tailwindcss
npx tailwindcss init

# 2. Configure your template paths in `tailwind.config.js`
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. Add Tailwind directives to your main CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Start the build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Cursor Utility Classes

Here is a comprehensive list of Tailwind’s cursor utility classes. They directly map to the standard CSS cursor property.

Class	CSS Properties	Common Use Case
cursor-auto	cursor: auto;	Default browser behavior.
cursor-default	cursor: default;	The platform-dependent default cursor (usually an arrow).
cursor-pointer	cursor: pointer;	Indicating an interactive element like a link or button.
cursor-wait	cursor: wait;	Indicating that the program is busy (e.g., during a data fetch).
cursor-text	cursor: text;	Indicating text that can be selected.
cursor-move	cursor: move;	Indicating something that can be moved.
cursor-grab	cursor: grab;	Indicating something that can be grabbed (like a slider).
cursor-grabbing	cursor: grabbing;	Indicating that something is currently being grabbed.
cursor-not-allowed	cursor: not-allowed;	Indicating an action cannot be performed (e.g., on a disabled button).
cursor-help	cursor: help;	Indicating help information is available.
cursor-none	cursor: none;	Hiding the cursor, e.g., in a kiosk or game interface. Use with caution.
cursor-zoom-in	cursor: zoom-in;	Indicating that the element can be zoomed in.
cursor-zoom-out	cursor: zoom-out;	Indicating that the element can be zoomed out.
cursor-*-resize	cursor: *-resize;	Indicating a resize handle (e.g., cursor-nwse-resize).

Practical Application: Component States

A common use case for cursor utilities is to reflect the state of a component. For example, a button can have a default state, a loading state, and a disabled state, each with a different cursor to provide clear feedback to the user.

Example: Interactive Button States

<!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 States</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="space-x-4">

    <!-- Default state -->
    <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 cursor-pointer">
      Click Me
    </button>

    <!-- Loading state -->
    <button class="px-6 py-3 bg-blue-400 text-white font-semibold rounded-lg shadow-md cursor-wait inline-flex items-center">
      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      Processing...
    </button>

    <!-- Disabled state -->
    <button class="px-6 py-3 bg-gray-400 text-gray-700 font-semibold rounded-lg shadow-md cursor-not-allowed" disabled>
      Cannot Click
    </button>

  </div>
</body>
</html>

Responsive and State Variants

You can apply cursor utilities conditionally using Tailwind’s responsive and state variant prefixes. For example, change the cursor only on hover or on larger screens.

• Hover: hover:cursor-pointer applies the pointer cursor only when the element is hovered.
• Disabled: disabled:cursor-not-allowed is a common pattern for styling disabled form elements.
• Responsive: md:cursor-zoom-in applies the zoom-in cursor on medium screens and up.

Best Practices & Accessibility (a11y)

• Principle of Least Astonishment: Only use cursor-pointer on elements that are genuinely clickable. Using it on static text can be confusing.
• Avoid cursor-none: Hiding the cursor can severely impact usability for mouse and trackpad users. Reserve it for specific, controlled environments like full-screen video players or games where a custom reticle is used.
• Combine with ARIA: When using cursor-not-allowed, ensure the element is also programmatically disabled (e.g., with the disabled attribute on a <button>) so that it’s inaccessible to screen readers and keyboard navigation.

Customizing Cursors

If you need a custom cursor, you can add it to your tailwind.config.js file under theme.extend.cursor.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(/path/to/fancy-cursor.cur), auto',
      }
    }
  }
}