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">

<!--    note that this method is portable and the binding handler you create is 
        not restricted to the context of this view model 
-->    
<div data-bind="colorAndTrans: { color: color, transValue: number }">FooManChoo</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 = function() {
    var self = this;
    self.color = ko.observable('');
    self.number = ko.observable(10);
};    
    
ko.bindingHandlers.colorAndTrans = {
    update: function(element, valAccessor) {
        var valdata = valAccessor();
        var cssString = valdata.color();
	    if (valdata.transValue() < 10) cssString += " translucent";
        element.className = cssString;
    }
}

var vm = new ViewModel();
ko.applyBindings(vm);