JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div id="app">
  
  <select v-model="theme.selected">
    <option v-for="item in theme.options" :value="item">{{item}}</option>
  </select>
  
  <article :class="`bg-${theme.selected}-background`">
    Blah
  </article>
</div>

SCSS

.bg-dark-background {
  color: black;
  background-color: #e7e7e7;
}

.bg-light-background {
  color:#e7e7e7;
  background-color: black;
}

Vue

new Vue({
	el: "#app",
  data: {
  	theme: {
    	selected: 'dark',
    	options: [
      	'dark',
        'light',
      ],
    },
  }
});