Override TailwindCSS classes with #error from Laravel Validation? - laravel

Question

Is it possible to actually override a TailwindCSS class with #error from Laravel Validation?
My inputs all have border-none, but I want to apply a border (that is red) only when we throw a validation error.
<form action="/contact" method="POST" class="flex flex-col space-y-8">
{{ csrf_field() }}
<div class="flex flex-col space-y-8 md:flex-row md:space-y-0 md:space-x-5">
<div class="relative">
<label for="text" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Full Name</label>
<input type="text" class="form-input rounded-lg bg-blue-200 border-none shadow #error('full_name') border border-red-500 #enderror" name="full_name" placeholder="John Doe" value="{{ old('full_name') }}" required />
#error('full_name')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<div class="relative">
<label for="email" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">E-mail</label>
<input type="email" class="form-input rounded-lg bg-blue-200 border-none shadow #error('email') border border-red-500 #enderror" name="email" placeholder="email#example.com" value="{{ old('email') }}" required />
#error('email')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
</div>
<div class="relative">
<label for="text" class="absolute -top-6 left-3 text-sm">Phone Number</label>
<input type="text" class="form-input rounded-lg w-full bg-blue-200 border-none shadow #error('phone_number') border border-red-500 #enderror" name="phone_number" placeholder="[phone]" value="{{ old('phone_number') }}" />
#error('phone_number')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<div class="relative">
<label for="textarea" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Message</label>
<textarea type="textarea" class="form-textarea rounded-lg w-full bg-blue-200 border-none shadow #error('message') border border-red-500 #enderror" name="message" rows="6" placeholder="Message" value="{{ old('message') }}" required></textarea>
#error('message')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<button type="submit" class="rounded-lg w-full md:w-1/2 self-end bg-neutral-900 uppercase font-black text-blue-400 border-none p-2">Send</button>
</form>
Since #error is after border-none, I'd think it would override it...

Answer 1

Use the following option to specify a new input field class
<input type="text" class="form-input rounded-lg w-full bg-blue-200 #if($errors->has('phone_number')) border border-red-500 #else border-none shadow #endif" name="phone_number" placeholder="[phone]" value="{{ old('phone_number') }}" />