Tailwindcss 样式未对 NextJS 的 Link 组件生效如何解决？

这个问题和Tailwind CSS配置无关，是Next.js旧版本Link组件的属性传递逻辑导致的：
Next.js 12.2版本之前的Link组件不会将className、style等属性透传给内部自动生成的<a>标签，所以你写在Link上的样式类最终没有出现在渲染后的DOM元素上，样式自然不生效。

方案1（兼容所有Next.js版本，无需修改配置） #

将<a>标签嵌套在Link组件内部，把样式类直接写在<a>标签上即可：

import Link from 'next/link'

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

方案2（适用于Next.js 12.2及以上版本） #

如果你不想额外嵌套<a>标签，可以开启Next.js的新Link行为配置，开启后Link组件会自动透传所有属性给内部的<a>标签：

1. 修改项目根目录的next.config.js文件，新增如下配置：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    newNextLinkBehavior: true,
  },
}

module.exports = nextConfig

2. 重启项目开发服务后，你原本写的Link加className的代码就可以正常生效了。

注意：Next.js 13及以上版本的App Router默认已经开启该特性，无需额外配置，直接给Link加className即可正常使用。

• 不需要修改任何Tailwind CSS配置，该问题和Tailwind本身的样式生成、扫描逻辑完全无关。

内容的提问来源于stack exchange，提问作者matt1331