Tailwind中如何一次性为多个伪类应用相同样式？

Tailwind原生并不支持你期望的[hover, focus]:bg-blue这种直接用逗号分隔多状态的语法，但有几种更简洁的替代方案可以解决多状态复用样式的问题：

• 使用Variant Groups（Tailwind v3.2+）
  这是最接近你需求的写法，利用内联变体组，把多个状态用&:前缀组合后包裹在括号里：

  <div className="[&:hover,&:focus]:bg-blue">Text</div>
  

  这种方式可以任意组合多个伪类、状态甚至媒体查询，比如要同时处理hover、focus、active和focus-visible状态：

  <div className="[&:hover,&:focus,&:active,&:focus-visible]:bg-blue">Text</div>
  

• 自定义复合变体（适合全局复用）
  如果你有一组需要重复使用的状态组合，可以在Tailwind配置里注册自定义变体：

  // tailwind.config.js
  module.exports = {
    plugins: [
      function({ addVariant }) {
        // 注册一个包含hover和focus的复合变体
        addVariant('hover-focus', ['&:hover', '&:focus']);
        // 注册包含更多交互状态的变体
        addVariant('interactive', ['&:hover', '&:focus', '&:active', '&:focus-visible']);
      }
    ]
  }
  

  注册完成后就能像使用原生变体一样直接调用：

  <div className="hover-focus:bg-blue interactive:text-white">Text</div>
  

• CSS变量配合批量状态设置
  如果你偏好原生CSS写法，可以用CSS变量来统一控制样式值，然后在多个状态下批量修改变量：

  /* 在全局CSS或组件样式中 */
  .interactive-bg {
    --bg-base: transparent;
    background-color: var(--bg-base);
  }
  .interactive-bg:hover,
  .interactive-bg:focus,
  .interactive-bg:active,
  .interactive-bg:focus-visible {
    --bg-base: blue;
  }
  

  然后在HTML中直接使用自定义类：

  <div className="interactive-bg">Text</div>
  

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