JSFiddle - React, Tailwind, and code Playground

HTML

<div id="#global-nav">
    <ul id="nav">
        <li><a href="#">One</a></li>
        <li><a href="#">Item5</a></li>
        <li><a href="#">Item with11</a></li>
        <li><a href="#">One</a></li>
    </ul>
</div>

CSS

#nav{
    list-style:none;
    margin:0;
    padding:0;
}
#nav li a{
    display:block;
    padding:5px;
    border:1px solid #ccc;
}

#nav li a.TEST1{
    border-color:red;
}

#nav li a.TEST2{
    border-color:blue;
}

JavaScript

var navChars = 4;

$('#global-nav #nav li a').filter(function() {
		
    if($(this).text().length > navChars){
        $('#global-nav #nav li a').addClass('TEST1');
        
    }else if($(this).text().length > navChars + 3){
        $('#global-nav #nav li a').addClass('TEST2');
    }
    
});