JSFiddle - React, Tailwind, and code Playground

HTML

<script id="template.html" type="text/ng-template">
    <div class="my-directive" ng-class="{'something': something}" ng-transclude><div>
</script>
      
<my-directive>my-directive</my-directive>
<my-directive ng-class="{'else': else}">my-directive</my-directive>

CSS

.something {
    font-weight: bold;
}
.else {
    font-style: italic;
}

JavaScript

!function() {
    'use strict';
    
    angular.module('app', []).directive('myDirective', ['$templateCache', function($templateCache) {
        return {
            restrict: 'E',
            transclude: true,
            replace: true,
            compile: function compile(tElement, tAttrs, transclude) {
                tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');

                return {
                    post: function postLink(scope, iElement, iAttrs) {
                        scope.something = true;
                        scope.else = true;
                    }
                };
            },
            template: $templateCache.get('template.html')
        };
    }]);
}();