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

【问题标题】：Tailwind CSS how to style a href links in React?Tailwind CSS 如何在 React 中设置 href 链接的样式？
【发布时间】：2021-01-01 03:11:06
【问题描述】：

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

如何恢复此功能？

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

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

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

【问题讨论】：

【解决方案1】：

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

相反，我建议创建自己的实用程序类来应用这些样式，而不是更改所有 <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>

【讨论】：

【解决方案2】：

如果您使用的是@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
}

【讨论】：

【解决方案3】：

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
}

【讨论】：

想象一下必须为<a> links 设置样式：(
大多数精心设计的网站都会设计锚标签，以使颜色和字体与其品牌相匹配。各种元素的默认浏览器样式可能会导致问题和不一致，这就是 Preflight 重置所有默认样式以从空白页面开始的原因。
此解决方案有效，但需要事先进行一些配置才能使用visited:text-purple-600。我做了一个separate answer 来详细说明。

【解决方案4】：

所以其他答案正确地指出预检和/或基础将重置组件，但您也可以使用 @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;
  }
}

【讨论】：

【解决方案5】：

正如 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: 的类可用于所有文本颜色类。

【讨论】：