JSFiddle - React, Tailwind, and code Playground

HTML

<style cn-styler type="text/css">.myClass {color: {{themeColor}};}</style>
<span class="myClass">Type in an HTML Color or Hex code (e.g. #cccccc)</span>
<br/><input type="text" ng-model="themeColor"/>

JavaScript

var app = angular.module('app', []);

app.directive('cnStyler', function() {
    return function($scope, $element) {
        //# Grab, process and store the original .html value (so we can re-.$eval it in the .$watch later)
        var css = ($element.html() + "").replace(/'/g, '"').replace(/{{/g, "' + ").replace(/}}/g, " + '");
        
        //# Setup our updateCSS function that .$watch will call on $scope changes
        function updateCSS() {
            $element.html($scope.$eval('\'' + css + '\''));
        }
        
        //# .$watch for any changes in the $scope, calling our updateCSS function when they occur
        $scope.$watch(updateCSS);
    };
});

app.controller('ctrl', function($scope)
{
    $scope.themeColor = 'blue';
});