Changing Cursor in TailwindCSS – All You Need to Know

When working on a customized design, you often need to change the cursor icon depending on the requirements. You may want to show not-allowed icon on disabled elements, a loading icon when a request is submitted, and so on. TailwindCSS offers every possible cursor icon available in CSS.

How to Change Cursor in TailwindCSS

You can use cursor- class to change the cursor icon. All you need to do is to add cursor- and press crtl+space and the intellSense will do the rest. Here is a simple example of changing the cursor in TailwindCSS.

You can check the working example of the above code on the tailwind playground. Also, check the available classes for the cursor in TailwindCSS.

How to Add Custom Icon for Mouse Pointer

You can also add your own icon if you have a .cur file. There are two ways to do that in TailwindCSS.

Method 1: Arbitrary Value to Add Custom Icon for Mouse Pointer

You can specify the URL to your icon with an arbitrary value. Check the following code to see how it works.

Method 2: Extending Theme to Add Custom Icon for Mouse Pointer

The second option is to add a custom icon in the config file. You need to extend the cursor property in the theme and provide the URL of the file. The following code adds a smiley cursor icon in the theme.

Conclusion

Changing a cursor icon is very easy in TailwindCSS. The cursor- class allows you to specify any cursor you want to use on your web page. You can also add your custom icon for the cursor with arbitrary values or by extending the theme.