JSFiddle - React, Tailwind, and code Playground

HTML

<button data-bind="click: color.bind($data, 'yellow')">yellow</button>
		<button data-bind="click: color.bind($data, 'green')">green</button>
		<button data-bind="click: color.bind($data, 'orange')">orange</button>
		<input type="number" data-bind="value: number">
		<!-- <div data-bind="css: {'translucent ': number() < 10}">static dynamic css classes</div> -->
        <div data-bind="css: color">static dynamic css classes</div>

CSS

div{
	width: 100px;
	height: 100px;
}
div.yellow{
	background: yellow;
}
div.green{
	background: green;
}
div.orange{
	background: orange;
}
div.translucent{
	opacity: 0.5;
}

JavaScript

var viewModel = {};

	viewModel.color = ko.observable('');
	viewModel.number = ko.observable(10);

	ko.applyBindings(viewModel);