使用来自 Laravel 验证的 @error 覆盖 TailwindCSS 类？

Question

是否可以使用来自 Laravel 验证的 @error 实际覆盖 TailwindCSS class？

我的输入都有边框-none，但我只想在我们抛出验证错误时应用边框（红色）。

<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="(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>

因为@error 在 border-none 之后，我认为它会覆盖它...

Answer 1

使用以下选项指定新的输入字段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') }}" />

使用来自 Laravel 验证的 @error 覆盖 TailwindCSS 类？

Override TailwindCSS classes with @error from Laravel Validation?

validation

laravel

tailwind-css