我试图在悬停时更改下面创建的列表的颜色,但它并没有按照预期执行。我无法弄清楚我在这里漏掉了什么。
<ul className="ul">
<li>
<a className="hover:text-white bg-purple border-white rounded-sm" href="#">abcd</a>
</li>
</ul>
我试图在悬停时更改下面创建的列表的颜色,但它并没有按照预期执行。我无法弄清楚我在这里漏掉了什么。
<ul className="ul">
<li>
<a className="hover:text-white bg-purple border-white rounded-sm" href="#">abcd</a>
</li>
</ul>
您的问题已经得到了解决,但似乎搜索类似问题时会被重定向到这里,因此我将提供第二种解决方案,以防这种情况特别。
如果您使用 Tailwind,无论您使用的环境是什么,例如某些框架还是通过 CDN,在 tailwind.config
中的 content 对象中必须具体指定文件的路径。
例如:
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
这个代码有效,但是当你在 tailwindcss
中使用 hover:
时,需要更加具体和准确。以下是一个包含您代码片段的示例(我稍微改了一下以看到效果)。您可以将此代码简单转换为 react.js
,将 class
替换为 className
。
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="h-full">
<div class="flex items-center justify-center h-screen">
<ul>
<li>
<a class="hover:text-white hover:bg-purple-600 hover:border-gray-300 border-2 rounded-sm p-3" href="#">It Works!</a>
</li>
</ul>
</div>
</body>
我刚刚运行了“npm run build”命令来构建CSS文件,它可以正常工作。