Struggling to dynamically render Tailwind CSS properties, where the class is applied in the browser inspector but the color fails to change.
A function is utilized to take a rarity (tier) as input and output the corresponding Tailwind CSS property defining the color of that tier:
export function checkRarity(tier: string) {
const rarityLookup = new Map([
["COMMON", "text-rarity-common"],
["UNCOMMON", "text-rarity-uncommon"],
["RARE", "text-rarity-rare"],
["EPIC", "text-rarity-epic"],
["LEGENDARY", "text-rarity-legendary"],
["MYTHIC", "text-rarity-mythic"],
["DIVINE", "text-rarity-divine"],
["SPECIAL", "text-rarity-special"],
["VERY_SPECIAL", "text-rarity-very-special"],
]);
return rarityLookup.get(tier) || "bg-gray-400";
}
To combine manually defined properties with dynamic ones, twMerge and clsx are employed based on this resource.
The merging function is as follows:
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Once the function is called to merge the Tailwind classes, like so:
const textColor = cn("text-2xl", checkRarity(auction.tier));
The className is then applied:
<h2 className={textColor}>
{text}
</h2>
Attempts were made to resolve the issue by:
- Verifying the spelling of Tailwind classes.
- Ensuring the Tailwind classes are configured in the Tailwind file.
- Experimenting with different names for the dynamic Tailwind class.
However, only the text-rarity-legendary Tailwind class seems to be functional.