如何去除iOS浏览器中<a>元素的顽固蓝色轮廓？（React+Tailwind）

问题背景 #

在React + Tailwind CSS项目中，页面<a>元素在选择菜单项并刷新后会出现顽固的蓝色轮廓，即使切换菜单项，原选中项的轮廓依然保留，严重影响页面设计效果。

初始尝试的解决方案 #

最初针对<a>元素的各类:focus相关伪类设置样式，尝试清除轮廓、边框及阴影，代码如下：

.tabList {
  @apply mx-5 flex flex-row py-2;

  a {
    &:focus {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }

    &:focus-within {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }

    &:focus-visible {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }
  }
}

环境差异问题 #

本地环境通过ngrok映射到iOS设备时，上述样式能正常去除轮廓；但部署到开发和生产环境后，蓝色轮廓再次出现，甚至自定义的轮廓颜色会被iOS强制覆盖为蓝色粗轮廓，相关-webkit前缀属性要么已废弃，要么无效。

项目代码场景 #

项目使用HeadlessUI的Tab组件渲染标签页，TSX代码片段如下：

<Tab.Group selectedIndex={getIndexOfSelecetedTopMenuItem(state)}>
  <Tab.List className={styles.tabList}> // Actual class
    {getToplevelMenuItems(state).map((item) => (
      <Tab as="div" key={item.menuItemId} className="basis-1/3">
        <ButtonTopCategory navigationModelUpdater={navigationModelUpdater} menuItem={item} />
      </Tab>
    ))}
  </Tab.List>

最终解决方法 #

经过排查，发现问题根源是HeadlessUI的Tab组件选中状态会覆盖自定义CSS样式。查阅官方文档后，通过给Tab组件添加Tailwind的outline-none类解决该问题，修改后的代码如下：

<Tab as="div" key={item.menuItemId} className="basis-1/3 outline-none">

参考HeadlessUI官方文档中「使用数据属性」章节的内容，利用Tailwind的条件样式处理组件选中状态的样式覆盖问题。

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