替换tailwindcss中的所有光标答案

【问题标题】：Replace all cursor in tailwindcss替换tailwindcss中的所有光标
【发布时间】：2022-01-26 09:05:56
【问题描述】：

如何在tailwindcss中用我的自定义图像替换所有光标？

我的尝试

在tailwind.config.js中：

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

答案：

在 global.css 中：

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

a, button {
  @apply cursor-pointer;
}

在tailwind.config.js中：

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

【问题讨论】：

这能回答你的问题吗？ Using external images for CSS custom cursors
那不是使用tailwindcss "tailwind.config.js"
我指的是原因，图像无法按预期使用。
您确定您的图片可用吗？您可以尝试使用外部图像。

标签： tailwind-css

【解决方案1】：

<url> 值必须后跟一个关键字值：

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

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

所以，在你的tailwind.config.js：

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

演示：https://play.tailwindcss.com/Nz8Ur49ENq

如果要替换页面中所有元素的光标，解决方案可能是：

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

例如：https://play.tailwindcss.com/XdgFOu86ix?file=css

【讨论】：

我在您的代码中看到，您将“光标点”类添加到
中。如果不将这些类明确定义到元素中，是否无法替换默认光标？例如，我的默认，play.tailwindcss.com/Kgc6pYAwEv，仍然是手指针
我已经根据您的需要更新了我的答案：play.tailwindcss.com/XdgFOu86ix?file=css。
感谢 andreivictor 的回答。看起来替换指针的唯一方法是显式定义默认情况下具有指针的每个元素，然后 @apply cursor-pointer 它们。示例：a, button { {at}apply cursor-pointer; } 如我错了请纠正我。演示：play.tailwindcss.com/T2tZDAGnyt?file=css
确实，我认为这是唯一的解决方案。