JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  <div :class="classes">
    我的妈呀
  </div>
</div>

CSS

.active {
  width: 300px;
  height: 300px;
  background: #666;
  color: red;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	isActive: true,
    error: null
  },
  computed: {
  	classes: function() {
    	return {
      	active: this.isActive && !this.error,
        'text-fail': this.error && this.error.type === 'fail'
      }
    }
  }
  
})