JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Green if supported:</h3>
<div class="env"></div>
<div class="safe-area-inset-top"></div>
<div class="safe-area-inset-right"></div>
<div class="safe-area-inset-bottom"></div>
<div class="safe-area-inset-left"></div>

CSS

.env:before {
  width: env(non-existent-variable, 200px);
}
.safe-area-inset-top:before {
  width: calc((env(safe-area-inset-top) * 0) + 200px);
}
.safe-area-inset-right:before {
  width: calc((env(safe-area-inset-right) * 0) + 200px);
}
.safe-area-inset-bottom:before {
  width: calc((env(safe-area-inset-bottom) * 0) + 200px);
}
.safe-area-inset-left:before {
  width: calc((env(safe-area-inset-left) * 0) + 200px);
}

div {
  position: relative;
  background: red;
  margin: 0.5em 0;
  padding: 0.25em 0.5em;
  width: 200px;
  box-sizing: border-box;
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: green;
}
div:after{
  content: "env(" attr(class) ")";
  position: relative;
  display: block;
}
.env:after {
  content: "env() in general";
}