By default, Tailwind includes cursor utilities for many built in options. You can customize these values by editing theme.cursor or theme.extend.cursor in your tailwind.config.js file.

tailwind.config.js

module.exports = {

  theme: {

    extend: {

      cursor: {

        'fancy': 'url(hand.cur), pointer',

      }

    }

  }

}

Learn more about customizing the default theme in the theme customization documentation.

​

Arbitrary values

If you need to use a one-off cursor value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="cursor-[url(hand.cur),_pointer]">

  <!-- ... -->

</div>

Learn more about arbitrary value support in the arbitrary values documentation.