JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

<css-values>
  CSS values:
</css-values>
<br>
<client-values>
  Client values:
</client-values>

CSS

html {
  perspective: 1000px
}

body {
  transform: rotateY(40deg) translateY(30px)
}

div {
  background: red;
  margin-bottom: 5px;
  transform: translateX(0.000001px);
}

.one { width: 0px; height: 0px; }
.two { width: 0.25px; height: 0.25px; }
.three { width: 0.5px; height: 0.5px; }
.four { width: 0.75px; height: 0.75px; }
.five { width: 1px; height: 1px; }

JavaScript

var divs = document.querySelectorAll('div');
var cssValues = document.querySelector('css-values');
var clientValues = document.querySelector('client-values');

[].forEach.call(divs, function(div) {
  cssValues.innerHTML += '<br>'+getComputedStyle(div).getPropertyValue('width')
});

[].forEach.call(divs, function(div) {
  clientValues.innerHTML += '<br>'+div.clientWidth
});