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',
      },
    },
  }
}

Does this answer your question? [Using external images for CSS custom cursors](https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) — gru, Jan 25 '22 at 08:47
I was referring to the cause, that an image could not be used as expected. — gru, Jan 25 '22 at 08:58
Are you sure that your image is available? You could try using an external image instead. — gru, Jan 25 '22 at 08:59

andreivictor · Accepted Answer · 2022-01-25T16:55:12.443

2

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

edited Jan 25 '22 at 16:55

answered Jan 25 '22 at 12:07

andreivictor

7,628
3
48
75

I saw in your code, you added the "cursor-point" class into
. Is it impossible to replace the default cursor without explicitly defining those classes into the elements? For example, my default , https://play.tailwindcss.com/Kgc6pYAwEv, is still hand-pointer
– Jingles Jan 25 '22 at 15:15
I've updated my answer with a solution for your need: https://play.tailwindcss.com/XdgFOu86ix?file=css. – andreivictor Jan 25 '22 at 15:33
1

Thanks andreivictor for your answers. Looks like the only way to replace the pointers is by explicitly defining each and every element that has a pointer by defaults, and @apply cursor-pointer them. Example: a, button { {at}apply cursor-pointer; } Correct me if I'm wrong. Demo: https://play.tailwindcss.com/T2tZDAGnyt?file=css – Jingles Jan 25 '22 at 16:37
indeed, I think that is the only solution. – andreivictor Jan 25 '22 at 16:58

Replace all cursor in tailwindcss

1 Answers1