tailwindcss的字体颜色不能正确作用与Icon组件

[Walk4Muscle]

想要给Icon组件自定义颜色，发现tailwindcss的字体颜色类并没有作用到Icon组件上。代码如下
<Icon icon="akar-icons:triangle-alert" :size="24" class="text-red-400" />
在HTML中渲染出来发现，class类有加在html标签上，但是class的内容没有正确加载
<span class="text-red-400 app-iconify anticon text-red-400" data-v-cfb28b72="" style="font-size: 24px; display: inline-flex;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--akar-icons" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M12 9v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M12 17.5v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M2.232 19.016L10.35 3.052c.713-1.403 2.59-1.403 3.302 0l8.117 15.964C22.45 20.36 21.544 22 20.116 22H3.883c-1.427 0-2.334-1.64-1.65-2.984z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span>

请问要如何给Icon加上tailwind的颜色类