formvalidation.io and Tailwind - getting messages to show under the relevant field

Question

I am using formvalidation.io and Tailwind. Whilst there are plugins for many of the major frameworks, there does not appear to be one for Tailwind.

My issue is trying to get the error messages to appear below the form input to which they relate. There are five inputs, all along the same lines :

<div class="relative w-full mb-3">
    <label class="block uppercase text-thatblue text-xs font-bold mb-2" for="password">Password</label>
    <input type="password" name="password" id="password" class="border-0 px-3 py-3 placeholder-thatblue-lightest text-thatblue bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" placeholder="Password">
</div>

If I put in an empty div with an ID of "messages" at the bottom of the form input I can get the error messages to display in that div using :

message: new FormValidation.plugins.Message({
    clazz: 'text-xs text-red-500',
    container: '#messages'
    },
}),

...but that's not a great visual layout.

If, however, I put in an empty div with class of messages under each of the inputs

<div class="messages"></div>

And then change the container targeted by formvalidation.io to be

container: '.messages'

...then error messages for all five inputs appear against the first input, which is even less ideal.

The documentation suggests that I can target closest siblings using :

message: new FormValidation.plugins.Message({
    clazz: 'text-xs text-red-500',
    container: function (field, ele) {
        return FormValidation.utils.closest(ele, '.messages').nextElementSibling;
    },
}),

But this does nothing.

What am I missing, Obi Wan? You're my only hope.