如何解决Tailwind CSS如何在React中设置href链接的样式?
出于某种原因,顺风似乎已删除了http链接的“蓝色”和“带下划线”部分。
如何重新获得此功能?
例如,在我的React代码中,我有:
return (
<a href={v.url}>{v.alias}</a>
);
,但是此链接显示为正常字体,并且没有下划线。浏览器也没有记住或在链接上悬停不同颜色的想法。
解决方法
Tailwind的Preflight功能将删除大多数元素的所有浏览器默认样式,从而为您提供一个清晰的基础,从而使跨浏览器的样式更加一致。
您需要重新添加所需的样式,例如:
f1_score
,
正如 Luke 正确解释的那样,Tailwind 的预检删除了所有浏览器默认设置。您必须自己添加样式:
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:
的类可用于所有文本颜色类。
You can learn more about enabling extra variants in the Tailwind docs.
,所以其他答案正确地指出预检和/或基础将重置组件,但您也可以使用 @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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。