JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<p data-bind="text: property"></p>

<p data-bind="text: property, css: { withoutdash: property().length > 0 }"></p>
<p data-bind="text: property, css: { 'with-dash': property().length > 0 }"></p>

CSS

p {
    color: black;
    margin: 0 0 .5em;
}

p.with-dash,
p.withoutdash {
    color: red;
}

JavaScript

function TestViewModel() {
    var self = this;
    
    self.property = ko.observable('This is a data-bound paragraph.');
}

ko.applyBindings(new TestViewModel());