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

Question

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

如何恢复此功能？

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

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

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

Answer 1

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

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

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

或者：

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

想象一下必须设置`<a> links`的样式:( (4认同)
大多数设计良好的网站都会设置锚标签的样式，以使颜色和字体与其品牌相匹配。各种元素上的默认浏览器样式可能会导致问题和不一致，这就是 Preflight 重置所有默认样式以从空白页面开始的原因。 (3认同)

Answer 2

编辑：看来 Tailwind 3 不需要这种额外的配置（至少在 3.1.1 中进行了测试）。如果您使用 Tailwind 2，可能仍然需要它。有关示例，请参阅下面 Patrik 的评论。

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

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