如何覆盖Firefox中Tailwind的默认焦点环样式？

Tailwind默认给焦点元素添加的蓝色焦点环是通过outline属性实现的，直接自定义颜色时容易被默认样式覆盖，单纯移除outline后再设置颜色又会恢复默认，这里给两个靠谱的解决方法：

方法一：用Tailwind内置类快速实现（推荐） #

直接给需要自定义焦点环的元素添加以下类：

<button class="focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]">点击测试</button>

• focus:outline-none：完全移除默认的outline焦点环
• focus:ring-2：设置焦点环的宽度（数值可调整，比如ring-1、ring-3）
• focus:ring-[#ff4d4f]：自定义焦点环颜色，也可以用Tailwind自带的颜色类（比如ring-red-500、ring-blue-600）

这种方式用Tailwind原生的ring系列类（基于box-shadow实现），不会和默认的outline样式冲突，优先级足够，能稳定生效。

方法二：全局统一配置（适合全项目复用） #

如果想让所有元素的焦点环都用自定义颜色，直接修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // 自定义焦点环颜色
      ringColor: {
        primary: '#ff4d4f',
      },
      // 可选：统一设置焦点环宽度
      ringWidth: {
        focus: '2px',
      },
    },
  },
  plugins: [],
}

之后在项目里直接用focus:outline-none focus:ring-primary就能应用自定义颜色的焦点环，不用每个元素重复写颜色值。

另外要注意：不要直接单独设置focus:outline-[颜色]，因为Tailwind的默认焦点样式优先级更高，必须先移除默认的outline，再用ring类或者自定义的box-shadow来实现焦点环。

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