I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading the Tailwind documentation, I understand that partial class names will not work, but I believe this does not apply to my situation since I am adding the complete class name. Is this a violation of Tailwind rules? What's strange is that only 'PW' is working properly while the others are not.
public static getWatchStatusBackgroundColor = (
watchStatus: ReturnType<typeof CommonMethods.getUserWatchStatusFromMedia>
) => {
switch (watchStatus) {
case 'W':
return 'bg-green-500';
case 'C':
return 'bg-yellow-500';
case 'PW':
return 'bg-blue-500';
case 'OH':
return 'bg-orange-500';
case 'D':
return 'bg-red-500';
default:
return '';
}
};
<div
className={`absolute right-0 top-0 flex h-7 w-7 items-center justify-center ${CommonMethods.getWatchStatusBackgroundColor(
userWatchStatusFromMedia
)} text-base text-white`}
>
{userWatchStatusFromMedia}
</div>