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" >
    {{ csrf_field() }}
    <div >
        <div >
            <label for="text" >Full Name</label>
            <input type="text"  name="full_name" placeholder="John Doe" value="{{ old('full_name') }}" required />
            @error('full_name')
            <div >{{ $message }}</div>
            @enderror
        </div>
        <div >
            <label for="email" >E-mail</label>
            <input type="email"  name="email" placeholder="[email protected]" value="{{ old('email') }}" required />
            @error('email')
            <div >{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div >
        <label for="text" >Phone Number</label>
        <input type="text"  name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />
        @error('phone_number')
        <div >{{ $message }}</div>
        @enderror
    </div>
    <div >
        <label for="textarea" >Message</label>
        <textarea type="textarea"  name="message" rows="6" placeholder="Message" value="{{ old('message') }}" required></textarea>
        @error('message')
        <div >{{ $message }}</div>
        @enderror
    </div>
    <button type="submit" >Send</button>
</form>

Since @error is after border-none, I'd think it would override it...

CodePudding user response：

Use the following option to specify a new input field class

<input type="text"  name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />