CSS框架----Tailwind CSS之无法动态绑定类名

使用Tailwind CSS实现页面时发现一个问题，当页面样式需要根据变量动态变化时，用TailwindCSS实现不了。

<-- HTML示例 -->
<div :class="color: colorConversion[color].color">
    testtesttest
</div>

// JavaScript示例
const { color } = defineProps({
    color: {
    type: Number,
    default: 0
  }
})
const colorConversion = ['red', 'blue']

// 注意: 该处red,blue已在tailwind.config.cjs中定义为另外颜色

这样实现时，文字颜色不会根据变量改变，文字颜色始终为黑色，F12检查也没有类名。

发生原因:

Tailwind CSS是一个功能类优先的CSS框架，它提供了一套预定义的类名，用于快速构建和设计用户界面。这些类名在编译时由Tailwind CSS处理，并生成相应的CSS规则。

动态拼接类名通常发生在运行时，即当JavaScript代码执行时，由于Tailwind CSS在编译时生成CSS规则，它无法预知运行时动态生成的类名。因此如果在运行时动态地拼接类名，并期望这些类名能够被Tailwind CSS识别和应用相应的样式，通常是不会工作的。

解决方法(直接用:style):

<-- HTML正确示例 -->
<div :style="color: getColor(color)">
    correct
</div>

// JavaScript 正确示例
const { color } = defineProps({
    color: {
    type: Number,
    default: 0
  }
})
const getColor = c => {
    switch (c) {
        case 0:
        return "FF0000"
        case 1:
        return "0000FF"
    }
}