Tailwind CSS中是否有替代方案可避免重复编写hover、focus等状态类？

有三种常用方法可以帮你简化hover状态的工具类写法，避免重复写hover:前缀：

1. 使用Tailwind官方的分组变体语法 #

Tailwind v3.2+支持将同一状态的多个工具类放在括号里统一声明，只需要写一次hover:前缀：

修改后的代码：

<button class="bg-gray-300 text-black hover:(bg-black text-white rounded-sm underline font-semibold)">Click Me</button>

这种方式最直接，不需要额外配置，适合快速简化单元素的hover样式。

2. 在Tailwind配置文件中自定义组件类 #

如果这个按钮样式需要全局复用，可以在tailwind.config.js里定义一个自定义组件，把默认样式和hover样式整合在一起：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      components: {
        '.custom-btn': {
          backgroundColor: '#d1d5db', // 对应bg-gray-300
          color: '#000000', // 对应text-black
          '&:hover': {
            backgroundColor: '#000000',
            color: '#ffffff',
            borderRadius: '0.125rem', // 对应rounded-sm
            textDecoration: 'underline',
            fontWeight: '600' // 对应font-semibold
          }
        }
      }
    }
  }
}

然后HTML里直接使用这个自定义类：

<button class="custom-btn">Click Me</button>

3. 使用@apply指令合并样式 #

如果你用PostCSS或CSS预处理器（比如Sass），可以在自己的CSS文件中创建自定义类，用@apply把Tailwind工具类合并进去：

/* styles.css */
.custom-btn {
  @apply bg-gray-300 text-black;
}

.custom-btn:hover {
  @apply bg-black text-white rounded-sm underline font-semibold;
}

HTML中使用：

<button class="custom-btn">Click Me</button>

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