JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<fieldset>
    <legend>Error: <span data-bind='text: errors().length > 0 ? errors()[0] : "No errors"'></span></legend>
    <label>
        First name: 
        <input data-bind='value: firstName' required pattern="^[A-Za-z]{1,255}$"/></label>

</fieldset>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.validation.rules.pattern.message = 'Invalid.';
    

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

var viewModel = {
    firstName: ko.observable()    
};

viewModel.errors = ko.validation.group(viewModel);

addEventListener('load', function () {
ko.applyBindings(viewModel);
});