tailwind编译器会在编译时解析你的代码，并且会解析那些在任何地方都没有使用过的purges类。你没有直接使用border-blueGray-400，所以它会把它当作一个没有使用过的类，并把它从捆绑包中删除以提高性能。
在我看来，最好的解决方案是不传递color、size等任意属性，而是传递className属性。
因此，您可以如下所示呈现组件：

<Sensor className="border-blueGray-400 bg-blueGray-50 text-blueGray-700" />

在子组件中：

<div className={props.className} />

你可以使用clsx这样的库有条件地呈现类，然后你的子组件将呈现：

<div className={clsx(
  "border-blueGray-400 bg-blueGray-50 text-blueGray-700": props.color === "blueGray",
  "border-mGray-400 bg-mGray-50 text-mGray-700": props.color === "mGray",
)} />

如果你只想修改一两个属性，这不是一个好的解决方案。我建议你直接把顺风类作为 prop 传递，就像在另一个答案中提到的那样。
但是如果你有一些更复杂的逻辑，比如依赖于类的多个CSS属性，这个解决方案可能会很好。

现在您可以使用

<div className={`border-${props.color}-400  bg-${props.color}-50 text-${props.color}-700`}>

通过在tailwindcss中使用安全列表类

解释

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

不

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

周围没有工作吗？

是

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

额外：如何在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}`)
        colorSafeList.push(`bg-${colorName}-${shade}`)
        colorSafeList.push(`border-${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: [],
}