为什么顺风找不到我的动态类？

Question

所以我尝试根据对象数组动态加载类

<div v-for="item in items"
     :key="item.id"
     :class="'text-' + item.color + '-600'"
>
{{ item.name }}
</div>

我检查了浏览器上的元素面板，类属性加载正确，但 css 没有。

为什么会这样？任何帮助将不胜感激。

Answer 1

Tailwind 生成一个仅包含项目中使用的类的 CSS 文件。它无法识别您正在使用的动态生成的类名，因此不会将其包含在输出文件中。

引用文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中作为完整不间断字符串存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS。

https://tailwindcss.com/docs/content-configuration#class-detection-in-deep

我最近回答了一个关于这个主题的类似问题：Fontawesome Icons not Accepted color props through React Function Components via tailwindcss

要解决此问题，请传入完整的类名或将其列入安全列表。