0

I'm building an app in Laravel where I use Vue.js as the frontend and Laravel as the backend. For the frontend I also use tailwindcss. So here's what's going on:

  1. You visit a route
  2. Vue will request the data from the api for that route
  3. Data gets set to be loaded in the frontend

The requested data returns an array of multiple objects. Each object has got a color variable inside which I want to use to set the color of a text, but while this is happening the tailwindcss is already been build so the colors won't generate. Another problem is that you'll never know what color you need so setting some random values in the tailwind.config.js won't work.

Here is my Vue.js part where I want to load the color:

<div v-for="item in packages.data">
    <h2 class="text-2xl" :class="'text-['+item.color+']'">
        {{ item.name }}
    </h2>
</div>

I also use scss in my project if it isn't possible using tailwind.

If additional code is needed just let me know.

Any help would be appreciated!

Keygun2k1
  • 145
  • 4
  • 12

1 Answers1

0

Try using inline style.

The value of color has to be something that CSS can understand. A name blue , Hex #0000FF or RGB rgb(0, 0, 255)

<div v-for="item in packages.data">
    <h2 class="text-2xl"  :style="`color:${item.color}`" >
        {{item.name}}
    </h2>
</div>

Here you have a working example Link

I hope it helps !

Alvaro
  • 59
  • 5
  • Thank you for answering, but it isn't the answer I'm looking for I'd rather not work with inline styling. – Keygun2k1 Aug 11 '22 at 14:01
  • From 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` Dynamic classes in Tailwind: https://tailwindcss.com/docs/content-configuration#dynamic-class-names I found it in this other question (React related) https://stackoverflow.com/a/71068925/13497410 – Alvaro Aug 12 '22 at 06:35
  • This other question also has many comments explaining Tailwind limitations with dynamic classes and workarounds, again, React related: https://stackoverflow.com/questions/69687530/dynamically-build-classnames-in-tailwindcss – Alvaro Aug 12 '22 at 06:41