TailwindCSS 活动链接文本颜色未更改

Question

我正在使用 NextJS 和 Tailwind css 来设计一个顶部导航栏。我希望更改活动链接的文本颜色。以下是我的代码：

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 className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/"><a>Home</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/signup"><a>Join</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/login"><a>Login</a></Link>
                    </li> 
                </ul>
        </nav>
        </header>
    )

}

我还在tailwind.config.css 中添加了以下内容：

module.exports = {
  #
  variants: {
    extend: {
      textColor: ['active'],
    },
 
}

尽管活动链接的文本颜色不会改变。

请你指导我做错了什么。

Answer 1

你可能会混淆两件事：

1. Tailwind CSS 中的active 前缀在当前按下元素时应用。 （例如，当您按下链接或按钮时）(https://tailwindcss.com/docs/hover-focus-and-other-states#active)
2. 当前“活动”页面，在当前页面路径中与nav item`s href 匹配

你不能用 1 实现 2，它们是不同的东西。

要在 next.js 中实现 2，您需要获取当前路径，将其与 <Link> 元素的路径进行比较，如果它们相等，则添加条件顺风类以表明您当前在相应的页面。

这是一个如何实现2的代码示例：

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

来源：https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e

在你的情况下，你可以这样做：

<Link href="/user/signup">
    <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname == "/user/signup" ? "text-indigo-600" : "text-brand-darkblue"}`}>
        Home
    </a>
</Link>