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

Posted 2023-03-07

【中文标题】TailwindCSS 活动链接文本颜色未更改

【英文标题】：TailwindCSS Active Link Text Color Not Changing

【发布时间】：2021-10-28 21:19:57

【问题描述】：

我正在使用 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" /></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'],
    ,
 

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

请你指导我做错了什么。

【参考方案1】：

你可能会混淆两件事：

Tailwind CSS 中的active 前缀在当前按下元素时应用。 （例如，当您按下链接或按钮时）(https://tailwindcss.com/docs/hover-focus-and-other-states#active) 当前“活动”页面，在当前页面路径中与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>

【讨论】：

谢谢。它解决了问题，也澄清了我的概念。几点可能对处于类似情况的其他人有用。在代码中，应该是 const router = useRouter(); // 不是 userRouter 另外，我将类元素放在 标记中，它也可以工作。再次感谢您。