Tailwind 类 使用动态 类 -Vue 时未加载
Tailwind classes not loading when using dynamic classes -Vue
所以我正在尝试根据对象数组
动态加载 classes
<div v-for="item in items"
:key="item.id"
:class="'text-' + item.color + '-600'"
>
{{ item.name }}
</div>
我检查了浏览器的元素面板，class 属性 加载正确，但 css 没有。
为什么会这样？任何帮助将不胜感激。
TailWind 生成一个 CSS 文件，其中仅包含项目中使用的 classes。它无法识别您正在使用的动态生成的 class 名称，因此不会将其包含在输出文件中。
引用文档：
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS.
https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
我最近回答了一个关于这个问题的类似问题：Fontawesome icons not accepting color props through react functional components via tailwindcss
要解决此问题，请输入完整的 class 名称或将其列入白名单。
所以我正在尝试根据对象数组
动态加载 classes<div v-for="item in items"
:key="item.id"
:class="'text-' + item.color + '-600'"
>
{{ item.name }}
</div>
我检查了浏览器的元素面板，class 属性 加载正确，但 css 没有。
为什么会这样？任何帮助将不胜感激。
TailWind 生成一个 CSS 文件，其中仅包含项目中使用的 classes。它无法识别您正在使用的动态生成的 class 名称，因此不会将其包含在输出文件中。
引用文档：
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS.
https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
我最近回答了一个关于这个问题的类似问题：Fontawesome icons not accepting color props through react functional components via tailwindcss
要解决此问题，请输入完整的 class 名称或将其列入白名单。