JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    
   <tr>
       <td class ="ui-editable-column">
           <input type="text" class="inputEle" value="foo" />
       </td>
       <td class="ui-editable-column ui-state-error">
           <input type="text" class="inputEle ui-state-error" value="bar" />
       </td>
       <!-- different class to fake absence of .ui-editable-column.ui-state-error selector -->
       <td class="ui-editable-column2 ui-state-error">
           <input type="text" class="inputEle ui-state-error" value="baz" />
       </td>
    </tr>
</table>

CSS

.ui-state-error{
    border: 1px solid red; 
}

.inputEle{
    margin:5px;
}

td.ui-editable-column.ui-state-error{
   border: 1px solid #dadada !important; 
}

td.ui-editable-column{
    background-color:blue;
}
td.ui-editable-column2{
    background-color:blue;
}