JSFiddle - React, Tailwind, and code Playground

by vintharas

HTML

<!-- setting inline sytles based on a condition -->
<input type="text" data-bind="value: temperature, style: {color: isHot() ? 'red':'blue'}"/>
<!-- setting a css class based on a condition -->
<input type="text" data-bind="value: temperature, css: {hot: isHot(), cold: isCold()}"/>

CSS

.hot{
    color: red;
}
.cold{
    color: blue;
}

JavaScript

var ViewModel = function(){
    var self = this;
    self.temperature = ko.observable(20);
    self.isHot = function(){
        return self.temperature() > 40;
    };
    self.isCold = function(){
        return self.temperature() < 15;
    };
};
ko.applyBindings(new ViewModel());