border-red.vue

<template>
 <div class="flex items-center mb-1 max-w-lg">
            <div class="flex-1 hidden md:block">
              <span>E-mail</span>
            </div>
            <div class="flex-1">
              <input
                class="appearance-none border-b border-r rounded w-full p-2 placeholder-themeGray-200 text-themeGray-400 leading-tight focus:outline-none focus:bg-white rounded-tr-none rounded-bl-none"
                type="email"
                placeholder="E-mail"
                v-model="emailAddress"
                :class="(!$v.emailAddress.required && $v.emailAddress.$dirty) || (!$v.emailAddress.email && $v.emailAddress.$dirty) ?'border-red-500 focus:border-red-500':'border-themeGray-200 focus:border-themeGray-400'"
              />
              <client-only>
                <div class="text-red-600 text-xs">
                  <div
                    v-if="!$v.emailAddress.required && $v.emailAddress.$dirty"
                    class="mt-2"
                  >*required</div>
                  <div
                    v-if="!$v.emailAddress.email && $v.emailAddress.$dirty"
                    class="mt-2"
                  >Should be valid email</div>
                </div>
              </client-only>
            </div>
          </div>
</template>