NuxtUI: can't change style globally

<template>
  <NuxtLayout name="admin">
    <main class="container mx-auto px-4 py-6">
      <!-- Step Buttons -->
      <div class="flex items-center justify-between gap-2 text-sm mb-6">
        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
          <div class="space-y-6 bg-voxel-secondary p-6 rounded-2xl shadow">
            <UFormField label="Email" name="email">
              <UInput v-model="state.email" />
            </UFormField>

            <UFormField label="Password" name="password">
              <UInput v-model="state.password" type="password" />
            </UFormField>

            <UButton type="submit">
              Submit
            </UButton>
          </div>
        </UForm>
      </div>
    </main>
  </NuxtLayout>
</template>

// app.config.ts
export default defineAppConfig({
    ui: {
        input: {
            slots: {
                base: 'text-red-200',
            }
        }
    }
})