JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<body>
<article>
<div><span class="t1">t1</span></div>
<div><span class="t2">t2</span></div>
<div><span class="t3">t3</span></div>
<div><span class="t4">t4</span></div>
<div><span class="t5">t5</span></div>
<div><span class="t6">t6</span></div>
<div><span class="t7">t7</span></div>
</article>
</body>

CSS

body
{
  background: white;
  --pixel: 1px;
  --block: calc(16*var(--pixel));
  --emsquare: var(--block);
  --counter: 5;
  --fallback: calc(5 * var(--emsquare));
  --fallback2: var(--fallback);
}
article
{
  background: red;
  width: 80px;
  height: 120px;
}
span
{
  background: green;
  display: inline-block;
  height: 20px;
  text-align: center;
}
span.t1
{
  width: calc(5 * var(--block));
}

span.t2
{
  width: calc(var(--counter) * var(--block));
}

span.t3
{
  width: calc(var(--block)*5);
}

span.t4
{
  width: calc(5 * var(--emsquare));
}

span.t5
{
  width: var(--fallback2);
}

span.t6
{
  --pixel: 10px;
  width: calc(0.5 * var(--emsquare));
}

span.t7
{
  width: var(--undefined42, 80px);
}