input does not inherit applied "base form"

[ahoiroman]

I would like to have a input that shows a red border if validation fails:

This is the input:

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

Alright - the validation works fine, but once form-default is applied, the input is having rounded borders.

This is the specific 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;

I am not sure why this is not working as expected. If I write:

.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;
}

it works fine. But this should not be the way to do this? Applying form-default in the first example should do the trick...?

Any ideas here?