Dynamically binding Tailwind classes to v-for elements

  [{
    ...
    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>