JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
	<div 
		@click="attachedClass = !attachedClass"
		:class="divClass" 
		class="box"></div>
	<div class="box" :class="{ yellow : attachedClass }" ></div>
	<div class="box" :class="[color, { yellow : attachedClass }]"></div>	
	<hr>
	<input type="text" v-model="color">
</div>

CSS

.box{
	width: 100px;
	height: 100px;
	background-color: gray;
	display: inline-block;	
	margin-right: 5px;
}
.yellow{
	background-color: #fbbd08;
}

.blue{
	background-color: blue
}

.green{
	background-color: green
}

JavaScript

new Vue({
	el : "#app",
	data : {
		attachedClass : false,
		color : "green"
	},
	computed : {
		divClass : function(){
			return {
				yellow : this.attachedClass,
				blue : !this.attachedClass
			}
		}
	}
})