我正在使用NextJS和顺风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'], }, }

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

你能指导我做错了什么吗。

顺晟科技：