如何设置聚焦状态元素鼠标悬停时的自定义背景色

Tailwind 同属性工具类的生效优先级由类名在class属性里的书写顺序决定，位置越靠后优先级越高。
你当前代码里普通悬停样式hover:bg-gray-50写在聚焦样式focus-within:bg-blue-50/50、focus:bg-blue-50/50前面，元素进入聚焦状态后，聚焦相关的背景类优先级高于普通hover类，所以悬停时背景不会切换。

使用Tailwind的状态组合变体，单独定义「聚焦状态下同时触发悬停」时的背景样式，并且把这个组合类放到所有背景相关类的最后，保证它优先级最高。
举个例子，如果你需要聚焦悬停时显示自定义浅紫色背景，修改后的代码如下：

<li class="relative bg-white py-5 px-4 hover:bg-gray-50 focus-within:bg-blue-50/50 focus-within:ring-1 focus:bg-blue-50/50 focus-within:ring-inset focus-within:ring-blue-600 focus-within:hover:bg-indigo-100 focus:hover:bg-indigo-100">

注意事项：

• 把示例里的bg-indigo-100替换成你需要的自定义颜色即可，支持Tailwind内置色，也支持任意值写法比如bg-[#f0f9ff]
• 如果你只需要处理focus-within触发的聚焦场景，只保留focus-within:hover:bg-[你的颜色]就行，不需要加focus:hover相关类
• 组合变体的顺序不能写反，focus-within:hover才代表「元素处于focus-within状态时被悬停」，顺序写反不会触发对应样式

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