Replace all cursor in tailwindcss

Question

How to replace all cursors with my custom image in tailwindcss?

My attempt

In tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      cursor: {
        default: "url(/images/cursor.png)",
        pointer: "url(/images/cursorPointer.png)",
      },
    },
  },
};

Answer:

In global.css:

*,
*:before,
*:after {
  @apply cursor-default;
}

a, button {
  @apply cursor-pointer;
}

In tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      cursor: {
        default: 'url(/images/cursor.png), default',
        pointer: 'url(/images/cursorPointer.png), pointer',
      },
    },
  }
}

Answer 1

The <url> value must be followed by a single keyword value:

/* URL with mandatory keyword fallback */
cursor: url(/images/cursor.png), pointer;

See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#syntax

So, in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      cursor: {
        default: 'url(/images/cursor.png), default',
        pointer: 'url(/images/cursor.png), pointer',
      },
    },
  },
  plugins: [],
}

Demo: https://play.tailwindcss.com/Nz8Ur49ENq

---

If you want to replace the cursor for all the elements in the page, a solution might be:

*,
*:before,
*:after {
  @apply cursor-default;
}

Example: https://play.tailwindcss.com/XdgFOu86ix?file=css