Next.js+TypeScript中Tailwind自定义颜色hover样式失效问题求助

我用Next.js+TypeScript搭配Tailwind CSS开发，将Header_2作为组件库中的展示组件使用。此前自定义颜色不生效的问题已通过配置tailwind.config.ts解决（修复了构建时颜色被移除的问题），但目前自定义颜色的hover样式仍无法正常工作。我已在safelist中添加了hover相关的匹配规则，问题依旧存在。

以下是我的组件代码及tailwind.config.ts配置：

组件代码（Header_2.tsx） #

export default function Header_2() {
  return (
    <div className="w-full h-16 flex justify-between items-center border-b-[1px] border-aui_border px-12 bg-aui_primary">
      <div className="h-full w-[10rem] flex justify-center items-center">
        <Link href="" className="h-full flex justify-center items-center">
          <Image src={Logo} alt="Logo" className="h-[50%] object-contain" />
        </Link>
      </div>
      <div className="h-full flex items-center gap-6">
        <Link href="" className="text-aui_text_secondary hover:text-aui_text">
          Field 1
        </Link>
        <Link href="" className="text-aui_text_secondary hover:text-aui_text">
          Field 2
        </Link>
        <Link href="" className="text-aui_text_secondary hover:text-aui_text">
          Field 3
        </Link>
        <div>
          <a href="#" target="_blank">
            <Image src={Github} alt="Github Image" />
          </a>
        </div>
        <Link
          href="/signin"
          className="w-20 h-8 rounded-md bg-aui_accent hover:bg-aui_accent_hover text-aui_text_accent text-center flex justify-center items-center"
        >
          Login
        </Link>
      </div>
    </div>
  );
}

tailwind.config.ts配置 #

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "var(--border)",

        //Website
        background: "var(--background)",
        foreground: "var(--foreground)",
        accent: "var(--accent)",
        accentLight: "var(--accent-light)",
        primary: "var(--primary)",
        primaryHover: "var(--primary-foreground)",
        secondary: "var(--secondary)",

        textPrimary: "var(--text-primary)",
        textSecondary: "var(--text-secondary)",
        textComplementary: "var(--text-complementary)",

        // Atlantic UI styles
        aui_primary: "var(--aui-primary)",
        aui_text: "var(--aui-text)",
        aui_text_secondary: "var(--aui-text-secondary)",
        aui_accent: "var(--aui-accent)",
        aui_accent_hover: "var(--aui-accent-hover)",
        aui_text_accent: "var(--aui-text-accent)",
        aui_accent_secondary: "var(--aui-accent-secondary)",
        aui_border: "var(--aui-border)",
      },
    },
    screens: {
      lg: { max: "1200px" },
      md: { max: "1000px" },
      sm: { max: "600px" },
    },
  },
  plugins: [],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(aui_primary|aui_text|aui_text_secondary|aui_accent|aui_accent_hover|aui_text_accent|aui_accent_secondary|aui_border)/,
    },
    {
      pattern:
        /(hover):(bg|text|border)-(aui_primary|aui_text|aui_text_secondary|aui_accent|aui_accent_hover|aui_text_accent|aui_accent_secondary|aui_border)/,
    },
  ],
};
export default config;

内容的提问来源于stack exchange，提问作者Krish Patel