Override TailwindCSS classes with @error from Laravel Validation?

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 protected]" 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="(123) 456-7890" 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...

Liudmila Savateeva · Accepted Answer · 2022-03-13 14:41:14Z

4

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="(123) 456-7890" value="{{ old('phone_number') }}" />

answered Mar 13, 2022 at 14:41

Liudmila Savateeva

3841 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fgodin Over a year ago

Works like a charm and it makes sense. Accepted, have a nice day. :)

Collectives™ on Stack Overflow

Override TailwindCSS classes with @error from Laravel Validation?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related