JSFiddle - React, Tailwind, and code Playground

HTML

<div x-data="test()">

  <ul class="items">
    <template x-for="arrayItem in arrayItems" :key="arrayItem">
      <li class="item" 
          :class="{'active': colours.includes(arrayItem.class)}"
          :class="arrayItem.class"
          x-text="arrayItem.label">
      </li>
    </template>
  </ul>
  
</div>

CSS

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
.item {
  opacity: 0.4;
}
.item.active {
  opacity: 1;
}

JavaScript

function test() {

  return {
  	colours: [
    	'red',
      'blue'
    ],
		arrayItems: [
      {label: 'Red', class: 'red'},
      {label: 'Green', class: 'green'},
      {label: 'Blue', class: 'blue'},
    ]
	};
}