Next.js中如何根据内容动态更新className？

我希望根据内容动态设置背景色，例如当值为android时背景为绿色，值为ios时背景为蓝色。想在整个Next.js项目（当前使用Tailwind CSS）中用一个通用函数实现此功能。

以下是根据文章标签获取对应颜色的通用函数：

export function getColor(tag) {
  switch (tag) {
    case "android":
    case "androidx":
    case "espresso":
    case "retrofit":
      return "bg-green-500"
    case "ios":
    case "facebook":
      return "bg-blue-500"
    case "angular":
    case "java":
    case "javascript":
    case "javafx":
    case "hms":
      return "bg-red-500"
    case "kotlin":
      return "bg-purple-500"
    case "firebase":
      return "bg-yellow-500"
    case "swift":
    case "swiftui":
    case "ubuntu":
      return "bg-orange-500"
  }
  return "bg-gray-500"
}

我设置className的方式如下：

<span
  className={`text-white uppercase ${getColor(post.tags?.[0])} inline-flex items-center px-2 rounded text-sm font-semibold font-mono`}>
  {post.tags?.[0]}
</span>

理论上这应该可行，但实际效果时好时坏。之前把这个函数写在每个需要的文件中时是有效的，但现在希望将其作为独立文件中的通用函数供全项目使用就出问题了。

想知道正确的处理方式是什么？还有其他更新className的方法吗？最佳实践是什么？

更新： #

找到了解决方案：我的通用函数位于lib/util.js文件中，但该路径未添加到tailwind.config.js的content配置里。将该路径添加到Tailwind配置后，功能恢复正常。

配置修改如下：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./lib/**/*.{js,ts,jsx,tsx}",
  ],
  // 其他配置...
}

内容的提问来源于stack exchange，提问作者Daniel Alvarez