如何在TailwindCSS中为所有元素添加focus-visible样式？

首先明确：不能通过给body添加类让所有子元素继承:focus-visible的样式。原因很简单——:focus-visible是伪类，它的样式只作用于自身处于焦点可见状态的元素，父元素的类不会传递给子元素的伪类状态。你给body加focus-visible类，只会在body本身获得焦点时生效，和子元素完全无关。

下面是两种可行的全局设置方案：

方案1：保留自定义CSS（最直接） #

你现在写的全局:focus-visible规则本身就可以实现“所有可交互元素生效”的需求，不需要额外改动。如果担心Tailwind的工具类优先级覆盖它，可以把这段代码放到Tailwind的@layer指令里，让它纳入Tailwind的样式层级：

@layer utilities {
  :focus-visible {
    outline: var(--primary-color) auto 2px;
  }
}

方案2：用Tailwind工具类语法全局配置 #

如果你更想用Tailwind的风格编写，可以在自定义CSS文件里用@apply组合工具类，放到@layer base或者@layer utilities里：

@layer base {
  :focus-visible {
    @apply outline-[var(--primary-color)] outline-auto outline-2;
  }
}

总结：全局统一:focus-visible样式，最靠谱的方式还是用自定义CSS（结合Tailwind的@layer避免优先级问题），没法通过给父元素加类实现。

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