JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app-7a">
  <add-div v-for="food in foodList" :item="food" customclass="my-class">
  </add-div>
</div>

CSS

.my-class {
  color: green;
}

JavaScript

Vue.component('add-div', {
  props: ['item', 'customclass'],
  template: '<div :class="customclass">{{ item.name }}</div>'
})

var app7a = new Vue({
  el: '#app-7a',
  data: {
    foodList: [{
      name: 'Vegetables',
    }, {
      name: 'Cheese'
    }, {
      name: 'Bread'
    }]
  }
})