如何在TailwindCSS中降低悬停类的优先级

Question

我是Tailwind的新手，我不确定是否有办法解决这种边缘情况。这是一个场景：

我们在产品页面上列出了不同的变体(例如不同的颜色标签)。当你悬停时，我们会在标签周围显示一个褪色的边框，当你选择变体时，标签会变为活动状态，其边框应该会变暗。

问题是：即使用户单击标记使其处于活动状态，用户仍然会看到悬停静止，而不是"活动"样式。

这些是我现在使用的类

<Tag
clssName={`flex rounded border border-gray-200  bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>

现在的问题是，当项目处于活动状态时，是否有方法覆盖悬停样式。一种方法可能是在项目处于活动状态时删除悬停类，但我说如果有顺风的方法可以修复它。

Answer 1

您可以使用focus实用程序。

下面是一个例子，您可以看到按钮在悬停和聚焦时有不同的行为。

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100  hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>

Answer 2

您可以为活动和非活动变体添加不同的样式。

<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>

Answer 3

您可以通过className上的三元运算符来实现这一点。默认情况下，当状态更改时，我们有border-gray-200 hover:border-gray-400，我们替换border-gray-700而不是border-gray-200 hover:border-gray-400。

const App = () => {
const [active, setActive] = React.useState(false);
return ( 
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'} 
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );

<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>