Why won't tailwind find my dynamic class?

Question

so i'm trying to load classes dynamically based on an Object Array

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

i checked on the Elements Panel on the browser and the class property loads correctly but the css doesn't.

Why is that so? Any help would be greatly appreciated.

Answer 1

Tailwind generates a CSS file containing only the classes used in your project. It can't recognise the dynamically generated class name you're using so doesn't include it in the output file.

To quote the documentation:

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

I answered a similar question on this subject recently: Fontawesome icons not accepting color props through react functional components via tailwindcss

---

To resolve the issue, either pass in the full class name or safelist it instead.