JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="foo"></div>

CSS

.foo {
  width: 1em;
  height: 1em;
  background: black;
}

.foo {
  --padding: 2em;
  padding: var(--padding);
}

.foo:hover {
  padding: 0;
}

/* reset */
body .foo:hover {
  padding: var(--padding);
}