JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Not sure why but...</h3>

CSS

h3 {
  color: red;
}

@supports (filter: grayscale(1)) or (-webkit-filter: grayscale(1)) {
  h3 {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }
}

@supports not (filter: grayscale(1)) and not not (-webkit-filter: grayscale(1)) {
  h3 {
    color: #808080;
  }
}