JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="ctrl">
        <div class="item" resizer></div>
    </div>
</div>

CSS

.item {
    background-color: tomato;
    height: 100px;
    width: 100px;
}

.large {
    background-color: dodgerblue;
}

JavaScript

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

app.directive('resizer', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
                       
            angular.element($window).on('resize', function () {

                $window.innerWidth > 500 ? 
                    elem.addClass('large') : elem.removeClass('large')
            });
        }
    }
}]);

app.controller('ctrl', ['$scope', function($scope) {
    
    
}]);