Tailwind单方向光标在Chrome、Firefox中失效问题排查求助

你遇到的情况既不是Tailwind使用错误，也不是浏览器兼容性bug——现在Chrome、Firefox这类现代浏览器，为了让用户拖动调整元素时更直观，已经把单一方向的resize光标（比如e-resize、s-resize）默认渲染成双向样式了，所以你看到的cursor-e-resize和cursor-ew-resize看起来一样。

如果一定要显示纯单一方向的光标，有两种可行办法：

1. 使用自定义光标图片 #

通过自定义光标资源替换默认样式，在Tailwind中可通过自定义工具类实现：

先在tailwind.config.js中添加自定义工具类：

module.exports = {
  theme: {
    extend: {
      cursor: {
        'east-only': 'url("/你的单向光标图片路径.png"), auto',
      },
    },
  },
};

然后在HTML中使用这个自定义类：

<div class="h-10 w-60 cursor-east-only bg-red-300">East: should be -&gt;</div>

提示：要准备合适尺寸的光标图，末尾的auto是为了在图片加载失败时显示默认光标，作为降级方案。

2. 替代方案（局限性较大） #

部分浏览器支持小众的单向光标值，但这类值大多不是为resize场景设计的（比如zoom-in是单向放大光标），实用性不强，更推荐上面的自定义图片方案。

补充说明 #

Tailwind的cursor-e-resize等类本身是正确的，它准确映射了CSS的cursor: e-resize属性，只是浏览器厂商为优化用户体验，统一将单一方向resize光标渲染为双向样式，这是当前浏览器的默认行为，并非框架或CSS规范的问题。

内容的提问来源于stack exchange，提问作者wongx