如何在Tailwind CSS中合并hover与focus状态的样式？

你想要的「hover或focus时都应用同一样式」效果，Tailwind默认的变体语法里，hover:focus:是同时满足hover和focus的“且”逻辑，所以达不到需求，但有几种方法可以避免重复写样式：

方法1：使用Tailwind 3.3+的任意变体（最直接） #

从Tailwind 3.3版本开始，支持用逗号分隔多个伪类来实现“或”逻辑，直接在HTML里写：

<div class="[&:hover,&:focus]:text-green-500">foo bar</div>

这个写法等价于你要的纯CSS逻辑：元素hover或focus时，文本变成green-500。

方法2：自定义工具类（适合全局复用） #

如果这个样式需要在多个地方使用，可以在tailwind.config.js里添加自定义工具类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      utilities: {
        'hover-focus:text-green-500': {
          '&:hover, &:focus': {
            color: '#22c55e', // 对应Tailwind green-500的颜色值
          },
        },
      },
    },
  },
}

之后在HTML里就能直接用这个自定义类：

<div class="hover-focus:text-green-500">foo bar</div>

方法3：用@apply封装复用类（适合CSS模块场景） #

如果项目里用了Tailwind的CSS预处理，可以在CSS文件里用@apply把重复的hover/focus样式封装成一个类：

/* 需确保该CSS文件被Tailwind的编译流程处理 */
.hover-focus-green-text {
  @apply hover:text-green-500 focus:text-green-500;
}

然后在HTML中引用这个类：

<div class="hover-focus-green-text">foo bar</div>

内容的提问来源于stack exchange，提问作者Ed.an