伪类设置悬停

了解如何通过悬停在 Tailwind 中执行伪类，以在光标悬停在按钮上时更改按钮的颜色。如果要更改颜色，请在悬停后设置颜色，设置将可以体现出来。

<button class="bg-red-700 btn hover:bg-red-500">前端晚间课</button>

伪类设置焦点

单击按钮时还要设置焦点。为了清晰起见，从圆角变为圆形以强调按钮的圆度。修改@apply：

@tailwind base;

@tailwind components;
.btn{
    @apply font-semibold text-white py-2 px-4 rounded-full;
}
@tailwind utilities;

当选择按钮（使用选项卡）时，将显示一个方框。单击时会出现一个方框，因此我们通过设置焦点以擦除方框。

当我将焦点设置为无轮廓时，外框消失，但我不知道按钮是否被选中。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none">前端晚间课</button>

设置阴影轮廓，以便您可以看到按钮被选中。如果你设置它，会沿着按钮创建一个阴影，所以用户不会感到任何不适。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none focus:shadow-outline">前端晚间课</button>