html - Tailwindcss 不适用于 NextJS Link 组件

Question

我有一个安装了 tailwindcss 的 nextjs 前端元素。

在下面的示例代码中

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>
)

当检查页面上的元素时， anchor 标记由 tailwindcss 设置样式，但 Link 标记中的 anchor 标记没有任何样式。

有人知道怎么解决吗？是否需要更改 tailwindcss 配置？

Answer 1

只需将 a 标签放在没有 href 的 Link 标签内，将 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

希望这对您有所帮助，如果您有机会请投票 OnClick fires for another buttons click event