我正在使用Tailwind CSS和React。
我已经尝试了一切在太阳下试图删除这个蓝色的轮廓从我的-元素在我的页面;
This blue outline keeps appearing whenever I chose a menupoint and refresh

我的第一个想法是：关注a元素，所以我尝试了以下方法：

.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;
    }
  }
}

我已经尝试了所有我能想到的focus伪类来尝试和针对iOS，但都没有用。（使用ngrok将开发端口转换到我的iOS设备），并且它不会返回。但是每当我将相同的代码推到开发和生产阶段时，蓝色的轮廓不断出现。我甚至试着让轮廓变成不同的颜色（它起作用了），iOS仍然强迫我的自定义颜色轮廓上使用厚厚的蓝色轮廓。
我也想不出有什么相关的-webkit-css类可以使用，很多都被弃用了，或者根本就不起作用。

以下是实际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>

当然，我会考虑可访问性，但是现在蓝色的轮廓只是干扰了页面的设计;
Choosing a different (I've chosen the second point here) menupoint still keeps the first on in focus even after refreshing the page
如果任何人有这样的经验（我已经谷歌了我的屁股），帮助将不胜感激。谢谢！
我已经尝试了几个测试和尝试的方法都无济于事;移除轮廓（将值设置为0或无），使其透明，更改颜色（iOS无论如何都会强制其为蓝色），将tabIndex prop设置为0或-1。
我期望蓝色轮廓消失时，选择0或无。

更新更新更新

我用了错误的工具来解决这个问题。我用HeadlessUI来渲染标签页，我发现我可以使用Tailwind CSS来有条件地应用样式。每当选择标签页时，我注意到标签组件的状态变为“selected”。
我查阅了Headless-UI文档，发现当状态改变时，可以改变样式。
<Tab as="div" key={item.menuItemId} className={"ui-selected: basis-1/3 outline-none"}>
参考：https://headlessui.com/react/tabs#using-data-attributes
原来状态是覆盖手动CSS！