Typescript 如何在Next.js和Tailwind.css中更改悬停时的字体 colored颜色

我做了一个导航栏组件，让用户在导航到主页、项目等时看到一个紫色的链接.当背景是暗的时候，我可以看到紫色的悬停，但是当背景是亮的时候，它是绿色的.如果我想让文本在我的背景是浅色的时候变成紫色，我该怎么做呢？

Navbar.tx

import React from 'react';
import Link from 'next/link';

export default function Navbar() {
  const hoverStyle = { color: '#7E0ACB' };

  return (
    <div className="fixed top-0 left-0 w-full flex justify-between p-12 bg-transparent z-10 text-`your text`white mix-blend-difference">
      <div className='text-3xl'>Long Tang</div>
      <ul className="flex text-xl">
        <li className="mx-4 hover:text-purple-600">
          <Link href="/" passHref>
            Home
          </Link>
        </li>
        <li className="mx-4  hover:text-purple-600">
          <Link href="/about" passHref>
            About
          </Link>
        </li>
        <li className="mx-4  hover:text-purple-600">
          <Link href="/projects" passHref>
            Projects
          </Link>
        </li>
        <li className="mx-4  hover:text-purple-600">
          <Link href="/research" passHref>
            Research
          </Link>
        </li>
        <li className="mx-4  hover:text-purple-600">
          <Link href="/contact" passHref>
            Contact
          </Link>
        </li>
      </ul>
    </div>
  );
}

全球

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0; /* black */
  --background-rgb: 255, 255, 255; /* white */
  --hover-color-rgb: 126, 10, 203; /* purple */
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

.hover-text-purple-600:hover {
  color: var(--hover-color);
}

我转到tailwind 配置文件，修改了 colored颜色 ，但仍然没有结果