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

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

有谁知道如何解决这一问题？是否需要更改 tailwindcss 配置？

Answer 1

只需将 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

希望这会有所帮助，如果您有机会，请为另一个按钮单击事件的 OnClick 触发投票