Tailwindcss未应用于NextJS链接组件

but5z9lq 于 2022-12-12 发布在其他

关注(0)|答案(5)|浏览(175)

我有一个nextjs前端项目，安装了tailwindcss。
在下面的示例代码中

import Link from 'next/link'

return(
  <div>

     <Link className="text-sm hover:text-gray-600" href="#">Test Link styling</Link>

     <a className="text-sm hover:text-gray-600" href="#">Test Link styling</a> 

  </div>
)

在检查页面上的元素时，锚标记会使用tailwindcss进行样式化，但Link标记中的锚标记不会使用任何样式化。
有没有人知道如何修复这个问题？需要改变tailwindcss的配置吗？

next.js

来源：https://stackoverflow.com/questions/69889572/tailwindcss-isnt-applying-to-nextjs-link-component

5条答案

按热度按时间

q9rjltbz1#

只需要把a标签放在Link标签里面，而不用href，把href留在Link中，然后对a标签应用样式。比如：

<Link className="text-sm hover:text-gray-600" href="#">
    <a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>

来源：https://nextjs.org/docs/api-reference/next/link
希望这能有所帮助，如果你有机会，请upvote OnClick fires for another buttons click event

赞(0）回复(0）举报 2022-12-12

3ks5zfa02#

我在里面放了一个按钮，因为idk为什么它的风格比<a>标签更好

<Link href={"/" + props.id}>
    <button className="text-slate-900">Show Details</button>
</Link>

它能完成任务。

赞(0）回复(0）举报 2022-12-12

hkmswyz63#

是的，这是因为Next.js Link不接受className属性。
如果检查代码的结果HTML，您将看到结果<a>标记上没有任何类。
要使其正常工作，您需要将一个锚标签作为子标签放置到链接中：

<Link href="#">
    <a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>

现在next不会为你的Link创建一个<a>标签，而是将href属性传递给你现有的<a>标签。

赞(0）回复(0）举报 2022-12-12

xjreopfe4#

您可以使用a标记而不是button标记。要使其正常工作，Link需要具有passHref属性。

赞(0）回复(0）举报 2022-12-12

n53p2ov05#

在next的Link标签内使用HTML标签，并在Link内给予href。

<Link href="/support">
   <a className="rounded-lg p-3 duration-300 hover:bg-slate-200">
     Support
   </a>
</Link>

赞(0）回复(0）举报 2022-12-12

我来回答

Tailwindcss未应用于NextJS链接组件

5条答案

相关问题

热门标签

最新问答