Syntax
<button class='cursor-pointer'>Click</button>When to use
Use Tailwind classes for system cursors; extend cursor in tailwind.config.js for custom URLs.
Keyword reference
The CSS property is cursor. The value form covered on this page is cursor-pointer, cursor-not-allowed. The full grammar accepts a comma-separated list of url() sources followed by a single required keyword fallback. Browsers walk the list left-to-right, use the first source they can render, and fall back to the keyword if all url() sources fail.
Browser support notes
- Chrome / Edge (Chromium): accepts cursor images up to 128×128. Falls back gracefully on broken URLs.
- Firefox: caps cursor images at 32×32 unless DPI scaling is in play. Always ship a 32×32 variant for Firefox compatibility.
- Safari: historically picky about URL-only fallback chains; always include a CSS keyword fallback at the end.
- Mobile Safari / Chrome on Android: no cursor at all. Wrap custom cursor rules in
@media (pointer: fine)to avoid wasted bytes.
Related cursor properties
- Building a fallback chain
- Hotspot tuning
- All standard cursor keywords
- Custom cursors on touch devices
From keyword to a real cursor pack
If you have decided which CSS cursor value you want and now need a cursor pack to ship behind it, browse the collections page or pick a free CC0 set from the community assets page. The website-cursor tutorial walks through the full deploy.