My hover: in tailwind CSS is not working for custom colors

Issue

I have written this code and am using Next.js with Typescript and Tailwind. I want am calling this Header_2 as something to display like a component display in a component library. Initially the custom colors were not working but I made it work using the pattern in the tailwind.config.ts. The issue was that they were removed when building the css file. The source from where I solved this issue. https://bobbyhadz.com/blog/tailwind-extend-colors-not-working

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>
  );
}

This is the code of my 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;

I have added a similar hover property to the safelist thinking that it should fix the issue but it didn't.

Solution

Variants for regular expression safelist entries are added via the variants key for the entry. Thus you should be able to combine both your entries into one as follows:

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)/,
    variants: ['hover'],
  },
],

Answered By - Wongjn