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

Question

出于某种原因，顺风似乎已经删除了 http 链接的“蓝色”和“下划线”部分。

如何恢复此功能？

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

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

但是此链接显示为正常字体，并且没有下划线。浏览器也没有记住或在链接上悬停不同颜色的概念。

Answer 1

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

您需要重新添加所需的样式，例如：

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:withtext-purple-600而不进行一些配置（至少使用 Tailwind 2。我不熟悉旧版本）。您还需要将以下内容添加到项目根目录下的 Tailwind 配置中：

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

这样，Tailwind 将使所有类与visited:所有文本颜色类一起使用。

您可以在 Tailwind 文档中了解有关启用额外变体的更多信息。

Answer 3

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

@layer 为您提供了一个存储桶，可以将东西放入其中，目前 Tailwind 中可用的对象包括基础、组件和实用程序。

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

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

链接的示例显示了如何对元素进行分组以创建一个元类以一致地设置按钮样式。

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

Answer 4

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

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

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

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

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

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

现在，在需要时显式使用该类，而不是无论如何应用它。

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