是否建议在tailwind中使用dynamic class？

不

通常不建议在tailwind-css中使用dynamic classes，因为tailwind使用tree-shaking，即任何未在源文件中声明的类，都不会在输出文件中生成。
因此，始终建议使用***完整类名***
根据文件
如果使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS

周围没有工作吗？

是

作为最后的手段，Tailwind提供安全列表课程。
安全列表是最后的手段，应该只在不可能扫描某些内容以查找类名的情况下使用。这种情况很少见，您应该几乎永远不需要此功能。
在您的示例中，您希望使用100 500 700色调。您可以使用正则表达式通过pattern包含所有您想要的颜色，并相应地指定色调。

注意：您也可以强制Tailwind创建variants：

在tailwind.config.js中

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need
      variants: ['lg', 'hover', 'focus', 'lg:hover'],      // Optional
    },
  ],
  // ...
}

额外：如何在safelist中自动设置所有顺风颜色

const tailwindColors = require("./node_modules/tailwindcss/colors")
const colorSafeList = []

// Skip these to avoid a load of deprecated warnings when tailwind starts up
const deprecated = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]

for (const colorName in tailwindColors) {
  if (deprecated.includes(colorName)) {
    continue
  }

  // Define all of your desired shades
  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]

  const pallette = tailwindColors[colorName]

  if (typeof pallette === "object") {
    shades.forEach((shade) => {
      if (shade in pallette) {
       // colorSafeList.push(`text-${colorName}-${shade}`)  <-- You can add different colored text as well 
        colorSafeList.push(`bg-${colorName}-${shade}`)
      }
    })
  }
}

// tailwind.config.js
module.exports = {
  safelist: colorSafeList,                      // <-- add the safelist here
  content: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: tailwindColors,
    },
  },
  plugins: [],
}

编辑：有简单的方法吗？

• 本次编辑是根据调查问卷的需求进行的 *

如果你不想用泛型的方式来做，你甚至可以选择一个简单得多的解决方案，通过临时定义你需要的类。

style() {
    return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`
}

到

style() {
    const styles = {
        default : 'bg-cyan-100 border-cyan-500 text-cyan-700',
        red : 'bg-red-100 border-red-500 text-red-700',
        orange: 'bg-orange-100 border-orange-500 text-orange-700',
        green: 'bg-green-100 border-green-500 text-green-700',
        blue: 'bg-blue-100 border-blue-500 text-blue-700',
    }
    return styles[this.color] ?? styles.default
}

这些回答受到了各种不同来源的影响：
@署名：ChenBr、mbdavis、SymmetricsWeb

这是一个相对容易的修复，这里提到避免动态构造类名tailwindcss.com/docs/content-configuration#dynamic-class-names
因此，在计算样式中，我只是有条件地指定了包含所有可能值的完整类名
从这里改变。

style() {
    return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`
}

到这个

style() {
    const styles = {
        default : 'bg-cyan-100 border-cyan-500 text-cyan-700',
        red : 'bg-red-100 border-red-500 text-red-700',
        orange: 'bg-orange-100 border-orange-500 text-orange-700',
        green: 'bg-green-100 border-green-500 text-green-700',
        blue: 'bg-blue-100 border-blue-500 text-blue-700',
    }
    return styles[this.color] ?? styles.default
}

现在一切都很完美

在处理一些基本的动态类时，我一直使用的方法是简单地将所有可能的类放入文件中。我注意到，即使类是在注解行中指定的，当在任何文件中找到这些类时，tailwind仍然会导入它们的样式
下面是一个示例

<template>
    <div :class="`bg-${color}-100 border-${color}-500 text-${color}-700`" class="border-l-4 p-4" role="alert">
        test
    </div>
</template>
<script>
    /* all supported classes for color props 
    bg-red-100 border-red-500 text-red-700
    bg-orange-100 border-orange-500 text-orange-700
    bg-green-100 border-green-500 text-green-700
    bg-blue-100 border-blue-500 text-blue-700
    */
    export default {
        name: 'Alert',
        props: {
            color: {type: String, default: 'red'}
        }
    }
</script>

所以现在所有这些都可以正常工作了

<Alert color="red"></Alert>
<Alert color="orange"></Alert>
<Alert color="green"></Alert>
<Alert color="blue"></Alert>

但是这个没有任何样式，因为为紫色生成的类没有在任何文件中预先指定

<Alert color="purple"></Alert>