The code I have written is for a header component in Next.js with Typescript and Tailwind. I named it Header_2 to represent a component display in a library. Initially, the custom colors were not rendering as expected, but I managed to resolve the issue by tweaking the settings in the tailwind.config.ts file. The problem occurred when the custom colors were removed during the css file build process. I found the solution from this source:
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 content 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 thought adding a similar hover property to the safelist would solve the issue, but unfortunately, it did not.