JSFiddle - React, Tailwind, and code Playground

HTML

<h1>In Chromium:</h1>

<input class="black" type="text" value="This is black"/>
<input class="black" type="text" readonly value="Why this is not black?"/>

<input class="green" type="text" value="Green"/>
<input class="green" type="text" readonly value="Screwed up Green"/>

<input class="blue" type="text" value="Natural Blue"/>
<input class="blue" type="text" readonly value="And, nope, is it our eyes, or Chromium cannot this time screw the colour?"/>

<br />
<br />
Isn't this weird?

CSS

input {
    background:white;
    color: black;
    width:100%;
    margin:4px
    
}

input.black {
    color: black;
    -webkit-text-fill-color: black
}

input.green {
    color: green;
    -webkit-text-fill-color: green
}

input.blue {
    color: blue;
    -webkit-text-fill-color: blue
}