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(), (number() < 10 ? 'translucent' : 'notTranslucent')].join(' ')">static dynamic css classes</div>
        <div data-bind="cssArray: [color, {translucent: number() < 10}]">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

ko.bindingHandlers.cssArray = {
  	update: function (element, valueAccessor, allBindingsAccessor, data, context) {
    	var arr = ko.unwrap(valueAccessor());
      for (var i=0; i<arr.length; ++i) {
        var wrapped = function () { return ko.unwrap(arr[i]) };
      	ko.bindingHandlers.css.update(element, wrapped, allBindingsAccessor, data, context);
      }
    }
  }
  
  var viewModel = {};

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

	ko.applyBindings(viewModel);