JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="a" data-t="1">
<div class="b">
<div class="c">23432543264526456</div>
</div>
</div>

CSS

.a[data-t="1"] {
  --fc: #333;
  --bc: #bbb;
}

.a[data-t="2"] {
  --fc: #eee;
  --bc: #333;
}

.a {
  color: var(--fc);
}

.c {
  background: var(--bc);
  transition: background-color 5s ease-out 0s, color 5s ease-out 0s, fill 5s ease-out 0s !important;
 }

JavaScript

document.querySelector('.a').onclick = function() {
	var t = +this.getAttribute('data-t');
  this.setAttribute('data-t', 3 - t);
  console.log(this);
}