TailwindCSS能否避免重复书写hover等状态前缀？

1. 原生分组变体语法（推荐） #

Tailwind CSS v3.2及以上版本原生支持你想要的括号分组语法，能自动给括号内的所有类添加指定状态前缀，完美解决重复书写的问题。

将你示例中的代码修改为：

<button class="m-auto p-4 rounded-md bg-blue-200 transition hover:(bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-400 text-white)">
  hello world
</button>

该语法支持所有Tailwind状态前缀，比如focus:(...)、active:(...)、dark:(...)，甚至嵌套变体如dark:hover:(...)也能正常使用。

2. 提取为自定义工具类（适合复用场景） #

如果这套状态样式需要在多个元素上复用，可以将其提取为自定义工具类：

方式一：通过自定义CSS文件 #

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-hover-effect {
  @apply hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white;
}

在HTML中直接引用该类：

<button class="m-auto p-4 rounded-md bg-blue-200 transition btn-hover-effect">
  hello world
</button>

方式二：通过CDN配置（适配你的示例场景） #

如果你使用CDN引入Tailwind，可以在配置中添加自定义工具类：

tailwind.config = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.btn-hover-effect': {
          '@apply hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white': {},
        }
      })
    }
  ]
}

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