tailwind dynamic class concatenation is not taking effect, despite being full class name

I’m using tailwind with next.js and I have a common method I’m using to dynamically return the background color I want. Problem is, despite the classname being added, the background color is not taking into effect. I read the tailwind docs that the class name cannot be added partially, but I think that doesn’t apply to my case. I’m adding the whole class name. Is this against tailwind rules? What’s weird is that only PW is taking into effect and not the rest.

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>

>Solution :

Consider checking the file that the getWatchStatusBackgroundColor() function is in is covered by the content file globs in your Tailwind configuration.