JSFiddle - React, Tailwind, and code Playground

by iamtimmo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-on:input=" cssClass = $event.target.value ">
    <p v-bind:class="myColor()">{{ title }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

CSS

.default {
  background-color: lightgray;
}

.red {
  background-color: pink;
}

.blue {
  background-color: lightblue;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: "Hello, World!",
    cssClass: ''
  },
  methods: {
  	myColor: function() {
    	if (['red', 'blue'].includes(this.cssClass)) {
    		return this.cssClass
      } else {
      	return 'default'
      }
    }
  }
})