JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/js/ink-all.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/css/ink.css">
<ul class="ink-tree-view" id="treeview">
  <li class="open"><span></span><a href="#">root</a>
    <ul>
      <li><a href="">child 1</a></li>
      <li><span></span><a href="">child 2</a>
        <ul>
          <li><a href="">grandchild 2a</a></li>
          <li><span></span><a href="">grandchild 2b</a>
            <ul>
              <li><a href="">grandgrandchild 1bA</a></li>
              <li><a href="">grandgrandchild 1bB</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="">child 3</a></li>
    </ul>
  </li>
</ul>
<button id="buttonx">Toggle Folder Class</button>
<button id="buttony">Toggle Custom Class</button>

CSS

/* Folder View */

ul.ink-tree-view.folder li.closed > span:before {
    content: "\f114";
}
ul.ink-tree-view.folder li.open > span:before {
    content: "\f115";
}

/* Custom View */
ul.ink-tree-view.custom li.closed > span:before {
    content: ' ';
    background-color: red;
    display:block;
    float: left;
    width: 1em;
    height: 1em;
}
ul.ink-tree-view.custom li.open > span:before {
    content: ' ';
    background-color: green;
    display:block;
    float: left;
    width: 1em;
    height: 1em;
}

JavaScript

Ink.requireModules(['Ink.Dom.Css_1', 'Ink.Dom.Event_1', 'Ink.UI.TreeView_1'], function (Css, InkEvent, TreeView) {
    var tree = Ink.i("treeview");
    var buttonX = Ink.i("buttonx");
    var buttonY = Ink.i("buttony");
    var treeview = new TreeView( '.ink-tree-view' );
    InkEvent.observe(buttonX, "click", function(){
        Css.removeClassName(tree, 'custom');
        Css.toggleClassName(tree, 'folder');
    });
    InkEvent.observe(buttonY, "click", function(){
        Css.removeClassName(tree, 'folder');
        Css.toggleClassName(tree, 'custom');
    });
});