JSFiddle - React, Tailwind, and code Playground

HTML

<!--<div data-bind="foreach: items" >
    <span data-bind="css : styling, text: name, click : toggle"></span>
    <br/>
</div>-->


<h4>People</h4>
<ul data-bind="foreach: people">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name, css: function () { $root.styling(); }, click: function () { $root.toggle();}"> </span>
    </li>
</ul>

CSS

.test
{
    color: green;
}
.bold
{
    font-weight: bold;
}

JavaScript

function AppViewModel() {
    var self = this;
    self.active = ko.observable(false); 
    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);
    self.styling = ko.computed(function () {
        alert(self.active());
        if (self.active() === true) {
            return 'test';
        }
        else {
            return '';
        }
    });

    self.toggle = function () {
        self.active(true);
      
    }
    
}
 
ko.applyBindings(new AppViewModel());