TailwindCSS 活动 Link 文本颜色未更改

Question

我正在使用 NextJS 和 Tailwind css 来设计顶部导航栏。我希望文本颜色更改为活动 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 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'],
    },
 
}

尽管文本颜色不会因活动 link 而改变。

请你指导我做错了什么。

Answer 1

您可能混淆了两件事：

Tailwind CSS 中的 active 前缀在当前按下元素时应用。（例如而你按下 link 或按钮）（https://tailwindcss.com/docs/hover-focus-and-other-states#active）
当前“活动”页面，因为在当前页面路径中匹配 nav 项目的 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>

TailwindCSS 活动 Link 文本颜色未更改

TailwindCSS Active Link Text Color Not Changing

html

javascript

css

next.js

tailwind-css