JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

@media (max-width: 350px) {
  .div {
    --color-when-small:  red;
    --border-when-small:  yellow;
  }
}

.div {
  --color-when-big: yellow;
  --border-when-big: red;

  background-color: var(--color-when-small, var(--color-when-big));
  border: 10px solid var(--border-when-small, var(--border-when-big));
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
}