Tailwind focus-bg-customColor在iOS及Safari中失效问题求助

针对你遇到的Firefox/Chrome正常、iOS/MacOS Safari无焦点效果的问题，可尝试以下方案：

• 强制自定义焦点样式，覆盖Safari默认行为
  Safari默认在鼠标点击按钮时会隐藏焦点环，仅键盘导航时显示。可以通过添加明确的outline或box-shadow来强制显示焦点状态：

  button:focus {
    outline: 2px solid #2C5DE5;
    outline-offset: 1px;
    /* 保留你原有的Tailwind样式，补充这个来确保Safari识别 */
  }
  

  如果你用Tailwind，也可以直接在类里追加自定义样式：

  <button class="py-2 bg-white border-solid border-1 border-black rounded-md focus:bg-focusBlue focus:text-[#2C5DE5] focus:outline-2 focus:outline-[#2C5DE5] focus:outline-offset-1" type="button" data-number={button_content}>
    <%= button_content %>
  </button>
  

• 确认Tailwind自定义颜色配置
  检查你的tailwind.config.js是否正确定义了focusBlue这个自定义颜色。如果未配置，Safari无法解析该颜色值，会导致背景色变化不明显：

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          focusBlue: '#你的目标颜色值', // 确保这里填写了正确的十六进制/RGB值
        },
      },
    },
  }
  

• 针对点击行为强制触发焦点样式
  若需要鼠标点击按钮时也显示焦点（而非仅键盘导航），可以结合:active:focus状态强化样式：

  button:active:focus {
    background-color: #你的focusBlue颜色值;
    color: #2C5DE5;
    outline: 2px solid #2C5DE5;
  }
  

• 检查元素可聚焦性
  虽然button默认自带可聚焦属性，但如果是动态生成的元素，可显式添加tabindex="0"确保Safari能正确识别其可聚焦状态：

  <button tabindex="0" class="py-2 ..." type="button" data-number={button_content}>
    <%= button_content %>
  </button>
  

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