logo标签列表

使用Tailwind CSS时，超链接中的悬停效果无法正常工作。

reactjstailwind-css
3

我试图在悬停时更改下面创建的列表的颜色，但它并没有按照预期执行。我无法弄清楚我在这里漏掉了什么。

<ul className="ul">
  <li>
    <a className="hover:text-white bg-purple border-white rounded-sm" href="#">abcd</a>
  </li>
</ul>
3个回答
4

您的问题已经得到了解决，但似乎搜索类似问题时会被重定向到这里，因此我将提供第二种解决方案，以防这种情况特别。

如果您使用 Tailwind，无论您使用的环境是什么，例如某些框架还是通过 CDN，在 tailwind.config 中的 content 对象中必须具体指定文件的路径。

例如：

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
4

这个代码有效，但是当你在 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>

1
所以，我需要给每个需要悬停效果的属性添加悬停前缀。 - sumitkhatrii
@sumitkhatrii 没错;-)祝你好运，最好的问候！ - MarioG8
0

我刚刚运行了“npm run build”命令来构建CSS文件，它可以正常工作。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Harrison
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接