JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h2 data-bind="style: {'--random-colour': randomColor, textDecoration: 'underline'}">This should receive a random text color.</h2>
CSS
h2 {
/* default fall-back color: */
--random-colour: #666;
color: var(--random-colour);
}
JavaScript
var viewModel = function ViewModel() {
this.randomColor = ko.computed(function() {
// Random color thanks to @paul_irish
return "#" + Math.floor(Math.random() * 16777215).toString(16);
});
}();
ko.applyBindings(viewModel);