Vite + TailwindCSS 项目中 :focus 伪类样式不生效问题求助

核心原因 #

• 你使用的大概率是 Tailwind CSS v3 版本，shadow-outline 是 Tailwind v2 的内置工具类，v3 版本已经默认移除了该类，你写的focus:shadow-outline没有对应的样式规则，所以不生效。
• 次要排查点：鼠标点击按钮时，部分浏览器默认不会给按钮触发:focus状态，只会触发:active，只有键盘Tab导航聚焦时才会触发:focus。

具体解决方案 #

方案1：替换为Tailwind v3支持的聚焦阴影类 #

直接把focus:shadow-outline替换为官方默认提供的focus:ring相关类即可，这是v3推荐的聚焦样式写法：

<button
onClick={dispatch({ type: 'SET_LOG_MODAL', payload: 'in' })}
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 py-2 px-4 mr-1 rounded bg-gray-100 text-black">
    Connexion
</button>

你可以根据需求调整ring的颜色、宽度、透明度。

方案2：沿用v2的shadow-outline效果，手动扩展规则 #

如果要保留原来的写法，在tailwind.config.js的theme.extend里添加自定义的boxShadow规则即可：

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {
      backgroundImage: {
        'man': '/img/man.jpg'
      },
      boxShadow: {
        'outline': '0 0 0 3px rgba(66, 153, 225, 0.5)' // 完全匹配v2的shadow-outline效果
      }
    },
  },
  // Tailwind v3可删除以下variants配置，默认已经开启所有常用变体
  variants: {
    extend: {
      boxShadow: ["hover", "focus", "active"]
    }
  }, 
  plugins: [],
}

配置更新后原来的focus:shadow-outline就可以正常生效。

方案3：适配鼠标点击触发聚焦样式的场景 #

如果需要鼠标点击按钮后也保留聚焦样式，可以把:focus类替换为:focus-visible，或者同时写两个类适配不同场景：

className="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ..."

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