输入不继承应用的“基本形式”

问题描述

如果验证失败，我希望输入显示红色边框：

这是输入：

<input
    :class="{'form-default': true,'form-error': errors[0]}"
    v-model="model">

好的-验证工作正常，但是一旦应用了form-default，则输入具有圆角边框。

这是特定的CSS（Tailwind 1.7）

.form-default {
    @apply appearance-none block form-input w-full transition duration-150 ease-in-out rounded-none text-paragraph text-base focus:outline-none focus:shadow-outline focus:shadow-outline-gray;
}

.form-error {
       @apply form-default border border-imperial-500 focus:outline-none focus:shadow-outline focus:shadow-outline-red;

我不确定为什么这不能按预期进行。如果我写：

.form-default {
    @apply appearance-none block form-input w-full transition duration-150 ease-in-out rounded-none text-paragraph text-base focus:outline-none focus:shadow-outline focus:shadow-outline-gray;
}

.form-error {
    @apply appearance-none block form-input w-full transition duration-150 ease-in-out rounded-none text-paragraph text-base focus:outline-none focus:shadow-outline focus:shadow-outline-gray border border-imperial-500 focus:outline-none focus:shadow-outline focus:shadow-outline-red;
}

工作正常。但这不应该是这样做的方法吗？在第一个示例中应用form-default应该可以解决问题...？

这里有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）