JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://unpkg.com/[email protected]/build/output/knockout-latest.debug.js"></script>
<div data-bind-css="{xpto: model.rule}" data-bind-text="model.field" data-bind-visible="model.rule2"></div>

CSS

.xpto{
  color:red
}

JavaScript

ko.bindingProvider.instance.preprocessNode = function (node) {
    if (node.nodeType === 1) {
        var bindings = node.getAttributeNames().reduce((bindings, attributeName) => {
            var match = attributeName.match(/^data-bind-(\S+)/);

            if (match) {
                bindings.push(match[1] + ":" + node.getAttribute(match[0]));
            }
            return bindings;
        }, []);

        if (bindings.length) {
            var dataBind = node.getAttribute("data-bind");

            node.setAttribute("data-bind", dataBind ? dataBind + "," + bindings.join() : bindings.join());
        }
    }
    return null;
}

ko.applyBindings({
	model:{
	field: 'Hello',
	rule: true,
	rule2: true
	}
});