悬停在使用 tailwind 的超链接中不起作用 css

Question

我试图在悬停时更改下面创建的列表的颜色，但它没有执行预期的操作。我不知道我在这里错过了什么。

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

Answer 1

它有效，但是当您在 tailwindcss 中使用 hover: 时，您需要更多 specific and exactly。下面是您的代码片段示例（我稍微更改了一下以查看效果）。您可以简单地将此代码转换为 react.js 添加 className 而不是 class.

<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>

悬停在使用 tailwind 的超链接中不起作用 css

Hover not working in hyperlinks using tailwind css

reactjs

tailwind-css