NextJS使用TailwindCSS时Active链接文字颜色不生效如何解决

核心错误点 #

• 混淆了Tailwind的active伪类与路由激活态的定义：Tailwind自带的active:*前缀匹配的是鼠标按下未松开的瞬时交互状态，并不是你需要的「当前路由匹配时导航永久高亮」的效果。
• Tailwind配置文件异常：你命名的tailwind.config.css后缀错误，正确配置文件名为tailwind.config.js，同时配置内的#为非法注释符号，JS配置需使用//做单行注释。

修正步骤 #

1. 修正Tailwind配置 #

将配置文件重命名为tailwind.config.js，内容修改为：

module.exports = {
  variants: {
    extend: {
      // 若不需要鼠标按下的瞬时高亮效果，可删除此行配置
      textColor: ['active'],
    },
  }
}

2. 基于Next.js路由能力实现激活态匹配 #

借助Next.js的useRouter钩子获取当前路由，判断导航链接与当前路由是否匹配，匹配时主动添加激活样式类即可。你可以封装通用的激活链接组件简化复用，完整代码如下：

import { useRouter } from 'next/router'
import Link from 'next/link'
import Image from 'next/image'

// 通用激活链接组件
const ActiveLink = ({ href, children }) => {
  const router = useRouter()
  // 路由完全匹配时判定为激活态，动态路由可自行调整匹配逻辑，比如startsWith
  const isActive = router.pathname === href
  return (
    <Link href={href}>
      <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${
        isActive ? 'text-indigo-600' : 'text-brand-darkblue'
      }`}>
        {children}
      </a>
    </Link>
  )
}

const Header = () => {
    return(
        <header>
            <nav className="sd:max-w-6xl mx-auto">
                <ul className="flex py-2">
                    <li className="mr-auto ml-4">
                        <Link href="/"><a><Image width={80} height={80} src="/images/brand-logo.png" alt="ECT Logo"/></a></Link>
                    </li>
                    <li>
                        <ActiveLink href="/">Home</ActiveLink>
                    </li>
                    <li>
                        <ActiveLink href="/user/signup">Join</ActiveLink>
                    </li>
                    <li>
                        <ActiveLink href="/user/login">Login</ActiveLink>
                    </li> 
                </ul>
        </nav>
        </header>
    )
}

补充说明 #

如果使用的是Next.js 13+ App Router版本，useRouter需要从next/navigation导入，匹配路径时使用router.asPath判断即可。

内容的提问来源于stack exchange，提问作者Saket Kumar Singh