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

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

如何恢复此功能

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

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

返回(
);

但是这个链接显示的像普通字体一样，没有下划线。浏览器也没有记住或在链接上悬停不同颜色的概念。

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

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

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

或：

a{
@应用下划线text-blue-600悬停：text-blue-800访问：text-purple-600
}

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

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

但是，如果没有一些配置（至少是Tailwind 2，我不熟悉较旧的版本），您不能只使用

visited:

和

text-purple-600

）。您还需要将以下内容添加到项目根目录下的Tailwind配置中：

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

这样，Tailwind将使所有具有

已访问：

的类可用于所有文本颜色类

---

因此，其他答案正确地指出，飞行前和/或基地将重置组件，但您也可以使用和指令将类应用于批量元素

@图层为您提供了一个可以放入东西的桶，目前在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;
  }
}

---

想象一下，必须设置链接的样式（大多数设计良好的网站都会设置锚定标签的样式，以使颜色和字体与其品牌相匹配。各种元素上的默认浏览器样式可能会导致问题和不一致，这就是为什么飞行前会将所有默认样式重置为从空白页面开始的原因。