JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<span data-bind="text: number"></span>
<input data-bind="value: number"></input>

CSS

.negative-warning {
    color: red;
}

JavaScript

ko.extenders.negativeValueWarning = function (target, option) {
    target.hasWarning = ko.computed(function() {
        var newValue = target();
        
        if(newValue && newValue.substring) {
            newValue = parseFloat(newValue);
        }
        
        return newValue < 0 ? true : false;
    });

    return target;
};

var override = function(overrideOn) {     
    var init = overrideOn.init;        
    overrideOn.init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        if (init)
            init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

        var value = valueAccessor();
        if (value.hasWarning) {
            ko.applyBindingsToNode(element, { negativeValueWarning: value.hasWarning });
        }
    };
}; 

override(ko.bindingHandlers.text);
override(ko.bindingHandlers.value);

ko.bindingHandlers.negativeValueWarning = {
    update: function (element, valueAccessor) {
        var warn = ko.utils.unwrapObservable(valueAccessor());
        if (warn)
            $(element).addClass("negative-warning");
        else
            $(element).removeClass("negative-warning");
    }
};



ViewModel = function() {
    this.number = ko.observable(-2).extend({ negativeValueWarning:true });
}
    
ko.applyBindings(new ViewModel());