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: {color(), 'translucent ': number() < 10}">static dynamic css classes</div>-->
<div data-bind="css: colorAndTrans">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);

	viewModel.colorAndTrans = ko.computed(function () {
	    var cssString = viewModel.color();
	    if (viewModel.number() < 10) {
	        cssString += " translucent"
	    }
	    console.log(cssString);
	    return cssString;
	});

	ko.applyBindings(viewModel);