Why are TailwindCSS styles not applied when using cn function in my Select component?

[Michael0520]

I am working on a React project using Next.js and TailwindCSS. I have a custom Select component where I am trying to dynamically apply TailwindCSS classes using a cn function. The className does get applied to the HTML element, but the styles are not reflected.

screenshot

Demo

You can find a demonstration of the issue on this CodeSandbox.

Here is a simplified version of my Select component:

// ... imports ...

export default function ThemeSelect() {
  // ... some code ...

  return (
    <div>
      <label className="mb-2 block text-xs font-medium text-neutral-400">
        Theme
      </label>
      <Select>
        <SelectContent className="dark">
          {Object.entries(themes).map(([name, theme]) => (
            <SelectItem key={name} value={name}>
              <div className="flex items-center gap-2">
                <div className={cn("h-4 w-4 rounded-full ", theme.background)} />
                <span className="capitalize">{name}</span>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

And here is my cn function:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

The issue is that while the className like "h-4 w-4 rounded-full bg-gradient-to-br from-green-300 via-blue-500 to-purple-600" does get applied to the div, the gradient background doesn't show up.
Things I've tried:

Clearing cache

Checking for specificity issues
Making sure TailwindCSS is correctly configured and imported
Any help would be appreciated. Thank you!