JSFiddle - React, Tailwind, and code Playground

by Slava

HTML

Variables
<img class="first" />

<img class="second" />

<img class="third" />

<img class="fourth" />

Useless --var: url('');
<img class="fifth" />

No variables
<img class="sixth" />

CSS

/* https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png */
:root {
  --domain: "https://www.google.com/";
  --path: "images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
  --path-combined: var(--domain) "images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
  --complete: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
  --complete-with-url: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'); /* works, but is useless */
}

.first {
  content: var(--complete);
}

.second {
  content: url(var(--complete));
}

.third {
  content: url(--complete);
}

.fourth {
  content: var(--domain) "images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
}

.fifth {
  content: var(--complete-with-url);
}

.sixth {
  content: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png');
}

img {
  border: 1px solid grey;
  width: 184px;
  height: 60px;
  display: block;
  margin-bottom: 10px;
}