JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b">div 1</div>
<div id="a" class="a d2">div 2</div>
<div id="b" class="b d3" style="width: 333px;">div 3</div>
<div id="c" class="c d4" style="width: 44em;">div 4</div>

CSS

div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

div {
    border: 2px solid #8c8;
    background: #efe;
}

JavaScript

var d = document.querySelectorAll('div');

for(var i = 0; i < d.length; ++i){
    console.log("div " + (i+1) + ":  " + getMatchedStyle(d[i], 'width'));
}



function getMatchedStyle(elem, property){
    // element property has highest priority
    var val = elem.style.getPropertyValue(property);
    
    // if it's important, we are done
    if(elem.style.getPropertyPriority(property))
        return val;
    
    // get matched rules
    var rules = getMatchedCSSRules(elem);
    
    // iterate the rules backwards
    // rules are ordered by priority, highest last
    for(var i = rules.length; i --> 0;){
        var r = rules[i];
        
        var important = r.style.getPropertyPriority(property);
        
        // if set, only reset if important
        if(val == null || important){
            val = r.style.getPropertyValue(property);
            
            // done if important
            if(important)
                break;
        }
    }
    
    return val;
}