Tailwind CSS 如何在 React 中设置 href 链接的样式？

Question

出于某种原因，tailwind 似乎删除了 http links 的“蓝色”和“下划线”部分。

如何恢复此功能？

例如，在我的 React 代码中，我有：

return (
  <a href={v.url}>{v.alias}</a>
);

但是这个 link 显示起来像普通字体，并且没有下划线。也没有让浏览器记住或悬停在 link.

上的不同颜色的概念

Answer 1

Tailwind 的 Preflight 功能将删除大多数元素的所有浏览器默认样式，为您提供一个干净的基础，使 cross-browser 样式更加一致。

您需要re-add您想要的样式，例如：

className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"

或：

a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}

Answer 2

正如 Luke 正确解释的那样，Tailwind 的 Preflight 删除了所有浏览器默认设置。您必须自己添加样式：

className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"

但是，您不能在没有一些配置的情况下将 visited: 与 text-purple-600 一起使用（至少对于 Tailwind 2。我不熟悉旧版本）。您还需要将以下内容添加到项目根目录下的 Tailwind 配置中：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}

这样，Tailwind 将使所有带有 visited: 的类可用于所有文本颜色类。

Answer 3

所以其他答案正确地指出预检 and/or 基础将重置组件，但您也可以使用 @layer and @apply 指令将 classes 批量应用于元素.

@layer 给你一个桶来放东西，目前 Tailwind 中可用的是基础、组件和实用程序。

例如，如果您想将所有链接设置为蓝色和下划线，您可以执行以下操作：

@layer base {
  a {
    @apply text-blue underline
  }
}

链接的示例展示了如何对元素进行分组，以制作一致的样式按钮的元class。

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

Answer 4

如果您正在使用 @apply，请注意状态（如悬停）不能像传递给 class 一样直接添加。

a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}

需要将它们分解并匹配到 css 状态，如下所示：

a {
   @apply underline text-blue-600
}
a:hover {
   @apply text-blue-800
}
a:visited {
   @apply text-purple-600
}

Answer 5

我不同意这里的其他人建议重新添加默认锚标记样式作为解决方案。您可以这样做，但是使用普通锚标记的一个烦恼是当您将按钮包装在锚标记中时，样式级联到按钮上的文本中，这非常烦人。

相反，我建议创建您自己的实用程序 class 来应用这些样式，而不是更改所有 <a> 标签的样式。例如：

.hyperlink {
  @apply text-blue-600 underline
}

.hyperlink:visited {
  @apply text-purple-600
}

现在，在需要时明确地使用 class 而不是无论如何都应用它。

<a class="hyperlink" href="/foo/bar">Text link</a>
<a href="foo/bar"><button>Style-Free Button!</button></a>

Tailwind CSS how to style a href links in React?