Tailwind的select-none类在Mobile Safari中无法生效问题求助

Mobile Safari对CSS的user-select属性处理有特殊性，Tailwind自带的select-none类可能因为前缀缺失导致失效，你可以通过以下两种方式解决：

• 自定义Tailwind工具类：在你的CSS文件中扩展select-none，显式添加Safari所需的前缀属性

@layer utilities {
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
}

• 内联样式补充：直接给目标元素添加内联样式，强制覆盖属性

<div className="select-none" style={{ WebkitUserSelect: 'none', userSelect: 'none' }}>
    bro
</div>

两种方法都能确保Mobile Safari识别到禁止选中的规则，测试后即可生效。

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