JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">This element should have `1rem` margins. All current browsers work as expected.</div>
<div class="bar">This element should have `1rem` margins. Edge 17 has `0` margins.</div>

<p>
Edge 17 sometimes cannot resolve nested custom properties value. This occurs only on shorthand properties like `margin`.
</p>

CSS

:root {
  --foo: calc(1rem);
  --bar: calc(var(--foo) * 1);
}

div {
  background-color: #f0f;
}

.foo {
  margin: var(--foo);
}

.bar {
  margin: var(--bar);
}