JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="test" placeholder="Please type abc" required="required" pattern="abc" />
<input type="text" name="test2" placeholder="This field is required" required="required" />
<input type="text" name="test3" placeholder="Please type anything you like" />

SCSS

::placeholder {
  color: blue;
}

:invalid {
  color: red;
  font-weight: bold;
  &::placeholder {
    color: inherit;
    font-weight: inherit;
  }
}