JSFiddle - React, Tailwind, and code Playground

by IgorMinar

HTML

<!doctype html>
<html xmlns:ng="http//angularjs.org" xmlns:my="http://example.com">
  <head>
    <title>test</title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://snugglenuts.macminicolo.net:8080/job/angular.js-igorminar/128/artifact/build/pkg/0.10.0-3224052f/angular-0.10.0-3224052f.js" ng:autobind></script>
    <script>
      angular.directive('my:every-third', function(expression, element) {
        return function(element) {
          this.$watch(expression, function(scope, value) {
            element.toggleClass('third', value % 3 === 0);
          });
        };
      });
        
      function Cntl() {
        this.items = ['foo 1', 'bar 1', 'baz 1', 
                      'foo 2', 'bar 2', 'baz 2', 
                      'foo 3', 'bar 3', 'baz 3'];
        this.itemClass = function(item) {
          return item.slice(0, 3);
        };
      }
    </script>
  </head>
  <body>
    <p>Buggy:</p>
    <ul ng:controller="Cntl">
        <li ng:repeat="item in items" ng:class="itemClass(item)" my:every-third="$index">{{item}}</li>
    </ul>
    <br/>  
    <p>Expected:</p>
    <ul ng:controller="Cntl">
        <li ng:repeat="item in items" ng:class="itemClass(item)"><span my:every-third="$index">{{item}}</span></li>
    </ul>
  </body>
</html>

CSS

.third {
    font-weight: bold;
}

.foo {
    color: red;
}

.bar {
    color: blue;
}

.baz {
    color: green;
}