I am currently working on creating a card component within Next.js, with multiple color options. However, I am facing an issue where the Tailwind colors are not being recognized when I attempt to utilize them.
Card.tsx:
interface Props {
// Adding supported colors here - can be easily modified
bgColor: "green" | "orange" | "yellow" | "blue" | "pink" | "purple" | "red";
title: string;
content: string;
symbol?: JSX.Element;
}
const Card = ({ bgColor, symbol, title, content }: Props): JSX.Element => {
let background: string;
let border: string;
// Using a switch statement due to issues with Tailwind color recognition
switch (bgColor) {
case "green":
background = "bg-green-300 text-green-900";
border = "border-green-400";
break;
...
default:
background = "bg-white border-black";
border = "border-white";
}
return (
<div
className={
"w-72 h-72 mb-3 p-8 border-2 rounded-md font-poppins " +
background +
" " +
border
}
>
<span className="text-5xl font-karla">{symbol}</span>
<h1 className="text-2xl font-bold mt-4">{title}</h1>
<p className="text-xl font-medium">{content}</p>
</div>
);
};
export default Card;
My intention:
interface Props {
bgColor: string;
title: string;
content: string;
symbol?: JSX.Element;
}
const Card = ({ bgColor, symbol, title, content }: Props): JSX.Element => {
const background = "bg-" + bgColor + "-300";
const border = "border-" + bgColor + "-400";
const text = "text-" + bgColor + "-900";
return (
<div
className={
`w-72 h-72 mb-3 p-8 border-2 rounded-md font-poppins ${background} ${border} ${text}`
}
>
<span className="text-5xl font-karla">{symbol}</span>
<h1 className="text-2xl font-bold mt-4">{title}</h1>
<p className="text-xl font-medium">{content}</p>
</div>
);
};
export default Card;
The code for the page:
import type { NextPage } from "next";
import { BiBookBookmark } from "react-icons/bi";
import Card from "../components/Card";
const Home: NextPage = () => {
return (
<main className="flex p-3 justify-around">
<Card
symbol={<BiBookBookmark />}
bgColor="yellow"
title="Services"
content="We offer 4 different options for your child to choose from."
/>
<Card
symbol={<BiBookBookmark />}
bgColor="green"
title="Services"
content="We offer 4 different options for your child to choose from."
/>
<Card
symbol={<BiBookBookmark />}
bgColor="red"
title="Services"
content="We offer 4 different options for your child to choose from."
/>
</main>
);
};
export default Home;
Is there a way to conditionally load Tailwind colors, or would changing PostCSS be necessary?