reactjs - 自定义按钮组件 + 正在清除的顺风样式

Question

我想创建一个这样的按钮组件：

    function Button ({ color }) {
      return (
       <button  className={`hover:bg-${color}-300 bg-${color}-100>
     
       </button>

这样，我只需执行以下操作就可以使所有按钮颜色（带有悬停变体）保持一致：

<Button color="green" >

</Button>

问题是 purge 没有看到我想要一个绿色按钮，所以当我使用 purge 时不会出现样式。

有没有更好的方法来创建符合 CSS 清除的按钮组件？