Nuxt•3mo ago

Dynamically binding Tailwind classes to v-for elements

i have this kind of array content rendered in the template

  [{
    ...
    tw: {
      bg: 'bg-green-500/10',
      num: 'text-green-500 dark:text-green-400',
    },
    ...
  }]

  [{
    ...
    tw: {
      bg: 'bg-green-500/10',
      num: 'text-green-500 dark:text-green-400',
    },
    ...
  }]

<template v-for="i in data">
  <dl :class="i.tw.bg">
    <dt>{{ i.tw.bg }}</dt>
    <dd :class="i.tw.num">{{ i.value }}</dd>
  </dl>
</template>

<template v-for="i in data">
  <dl :class="i.tw.bg">
    <dt>{{ i.tw.bg }}</dt>
    <dd :class="i.tw.num">{{ i.value }}</dd>
  </dl>
</template>

but it only applies to the first iterated array item:

1 Reply

therin•3mo ago

i have nuxtui installed with mostly the default config it gave okay it probably needed a different approach, so i did this and made the respective child styles in the stylesheet:

  [{
    ...
    tw: 'green-card',
    ...
  }]

  [{
    ...
    tw: 'green-card',
    ...
  }]

<dl :class="i.tw">

<dl :class="i.tw">

Gaming

Programming

Dynamically binding Tailwind classes to v-for elements