JSFiddle - React, Tailwind, and code Playground

HTML

<input data-bind="value: colorName, valueUpdate:'afterkeydown'" />

JavaScript

ko.extenders.uppercase = function(target, option) {
    console.log('extend');
    target.subscribe(function(newValue) {
        console.log(newValue);
       target(newValue.toUpperCase());
        console.log(target());
    });
    return target;
};

function viewModel() {
    var self = this;
    self.colorName = ko.observable().extend({ uppercase: true });
}

ko.applyBindings(new viewModel());