JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<div data-bind="text: foo "></div>
<input type="text" data-bind="value:bar "></input>

<div data-bind="special: { 'red' : makeRed }">
    Red!?    
</div>

CSS

.red{
    color: red
}

JavaScript

var handler = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
		
        var opts = ko.utils.unwrapObservable(valueAccessor());

        
        if(opts.red($(element))){
            $(element).addClass('red')
        }else{
            $(element).removeClass('red');            
        }
}

ko.bindingHandlers.special = {
	update: handler,
    init: handler
}

$( document ).ready(function() {
    
    var vm = {
        foo: ko.observable('Bar'),
        bar: ko.observable('foo')   
    };
	
    vm.makeRed = function($el){
    	return vm.bar() === "red";
    }
        
    ko.applyBindings(vm);
    
});