Add border style when validation failed for TailwindCSS?

[daFish]

Hi there,

I'm trying to add a custom border style when a validation failed like in Bootstrap:

Added my custom classes doesn't work so I guess I miss something. Any help or hint is greatly appreciated.

[bucari]

Are you using tom-select with TailwindCSS?

Can you share your css?

[daFish]

This can be achieved by applying custom styles:

.ts-wrapper.is-invalid,
.was-validated .invalid,
.was-validated :invalid + .ts-wrapper {
    @apply border-red-500 text-red-500;
}

.ts-wrapper.is-invalid .ts-control,
.was-validated .invalid.focus .ts-control,
.was-validated :invalid + .ts-wrapper.focus .ts-control {
    @apply border-red-500 text-red-500;
}

Make sure the element has the class is-invalid.