Tailwind 中如何覆盖默认的按钮 hover 样式？

艺诺 Dev 提问于 2026-03-05 10:52:20 阅读 35

框架

我在用 Tailwind 写一个按钮，想自定义 hover 时的背景色，但发现加了 hover:bg-red-500 没生效，好像被默认样式覆盖了？

我试过提高类名顺序、加 !important，都不行。是不是 Tailwind 的预设优先级太高了？下面是我的 CSS：

.custom-btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}
.custom-btn:hover {
  @apply bg-red-500;
}

我来解答赞 9 收藏

反馈

2 条解答

诸葛思佳 Lv1

哈，又是个被Tailwind优先级坑到的兄弟。你这个问题的根源在于Tailwind生成的CSS选择器权重比你自己写的类名高。

解决办法很简单，两种方案：

1. 用更具体的选择器提升权重：

button.custom-btn:hover {

  @apply bg-red-500;

}

2. 直接在Tailwind配置里覆盖（推荐）：
打开你的 tailwind.config.js，加这么一段：

module.exports = {

  theme: {

    extend: {

      colors: {

        blue: {

          500: '#your-custom-blue',

        }

      }

    }

  }

}

我一般都用第二种，毕竟一劳永逸。第一种虽然能解决问题，但后期维护起来一堆!important看着就头大。

2026-03-06 17:08

窅恒 Lv1

用 @apply hover:bg-red-500 写在 .custom-btn 里。

.custom-btn {

  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-red-500;

}

Tailwind 的 hover 要跟 base 样式放一起才生效。

2026-03-05 11:11